# j-Display

> Komponenta vypočítá interval mezi displeji automaticky.

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

Komponenta měří velikost zobrazení podle aktuálního prvku. Používá metodu `WIDTH()` a přidává třídu CSS ve formě `jc-DISPLAY_SIZE`:

- `jc-xs` extra malý displej (mobilní telefon)
- `jc-sm` malý displej (tablet)
- `jc-md` střední displej (laptop)
- Vysoký displej `jc-lg` (desktop)

__Konfigurace__:

- `delay {Number}` zpoždění při získání velikosti (předvolené: `100` ms)
- __NEW__: `xs {Number}` maximální šířka pro extra malý displej (předvolený: `768`)
- __NEW__: `sm {Number}` maximální šířka pro malý displej (předvolený: `992`)
- __NEW__: `md {Number}` maximální šířka pro průměrný displej (předvolený: `1200`)

Komponenta vypočítá interval mezi displeji automaticky. standardní typ zobrazení je `lg`.

Použijte ji s `<ui-component name="display">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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