# j-Display

> Le composant calcule automatiquement l'intervalle entre les affichages. Le type d'affichage par défaut est LG.

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

Le composant mesure une taille d'affichage en fonction de l'élément actuel. Il utilise la méthode `WIDTH()` et ajoute une classe CSS sous la forme `jc-DISPLAY_SIZE` :

- `jc-xs` très petit écran (téléphone portable)
- `jc-sm` petit écran (tablette)
- Écran moyen `jc-md` (ordinateur portable)
- Grand écran `jc-lg` (ordinateur de bureau)

__Configuration__ :

- `delay {Number}` un délai d'obtention de la taille (par défaut : `100` ms)
- __NOUVEAU__ : `xs {Number}` une largeur maximale pour le très petit écran (par défaut : `768`)
- __NOUVEAU__ : `sm {Number}` une largeur maximale pour le petit écran (par défaut : `992`)
- __NOUVEAU__ : `md {Number}` une largeur maximale pour l'affichage moyen (par défaut : `1200`)

Le composant calcule automatiquement l'intervalle entre les affichages. Le type d'affichage par défaut est `lg`.

Utilisez-le avec `<ui-component name="display">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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