# j-Display

> Die Komponente berechnet den Abstand zwischen den Anzeigen automatisch. Der Standardanzeigetyp ist LG.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: d3b9d718e7e8452b46d0b83d352856890ba408e82e97ca4eb5b4bae564972b73
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Die Komponente misst eine Anzeigegröße entsprechend dem aktuellen Element. Es verwendet die Methode `WIDTH()` und hängt eine CSS-Klasse in der Form `jc-DISPLAY_SIZE` an:

- `jc-xs` extra kleines Display (Mobiltelefon)
- `jc-sm` kleines Display (Tablet)
- `jc-md` mittleres Display (Laptop)
- `jc-lg` großes Display (Desktop-Computer)

__Konfiguration__:

- `delay {Number}` eine Verzögerung für den Erhalt der Größe (Standard: `100` ms)
- __NEU__: `xs {Number}` eine maximale Breite für das extra kleine Display (Standard: `768`)
- __NEU__: `sm {Number}` eine maximale Breite für das kleine Display (Standard: `992`)
- __NEU__: `md {Number}` eine maximale Breite für die mittlere Anzeige (Standard: `1200`)

Die Komponente berechnet den Abstand zwischen den Anzeigen automatisch. Der Standardanzeigetyp ist `lg`.

Verwenden Sie es mit `<ui-component name="display">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<div style="width:500px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.xs">
		<ui-bind path="common.xs" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:800px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.sm">
		<ui-bind path="common.sm" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:1080px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.md">
		<ui-bind path="common.md" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:1380px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.lg">
		<ui-bind path="common.lg" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
```