# j-Display

> De component berekent het interval tussen de afbeeldingen automatisch.De standaard type display is lg.

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

De component meet een afbeeldingsgrootte volgens het huidige element. Het maakt gebruik van de `WIDTH()`-methode en voegt een CSS-klasse toe in het formulier `jc-DISPLAY_SIZE`:

- `jc-xs` extra kleine afbeelding (mobiele telefoon)
- `jc-sm` kleine afbeelding (tablet)
- `jc-md` medium display (Laptop)
- `jc-lg` grote afbeelding (desktop computer)

__Configuratie__:

- `delay {Number}` een vertraging voor het verkrijgen van de grootte (default: `100` ms)
- __NEW__: `xs {Number}` een maximale breedte voor de extra kleine afbeelding (default: `768`)
- __NEW__: `sm {Number}` een maximale breedte voor het kleine display (default: `992`)
- __NEW__: `md {Number}` een maximale breedte voor het medium display (default: `1200`)

De component berekent automatisch het interval tussen de afbeeldingen.De standaard type display is `lg`.

Gebruik het met `<ui-component name="display">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

```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 />
```