# j-Display

> Komponent automaticky vypočíta interval medzi zobrazeniami. Predvolený typ zobrazenia je lg.

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

Komponent meria veľkosť zobrazenia podľa aktuálneho prvku. Používa metódu `WIDTH()` a pridáva triedu CSS v tvare `jc-DISPLAY_SIZE`:

- Extra malý displej `jc-xs` (mobilný telefón)
- `jc-sm` malý displej (tablet)
- Stredný displej `jc-md` (laptop)
- `jc-lg` veľký displej (stolný počítač)

__Konfigurácia__:

- `delay {Number}` oneskorenie na získanie veľkosti (predvolené: `100` ms)
- __NEW__: `xs {Number}` maximálna šírka pre extra malý displej (predvolené: `768`)
- __NEW__: `sm {Number}` maximálna šírka pre malý displej (predvolené: `992`)
- __NEW__: `md {Number}` maximálna šírka pre stredný displej (predvolené: `1200`)

Komponent automaticky vypočíta interval medzi zobrazeniami. Predvolený typ zobrazenia je `lg`.

Použite ho so `<ui-component name="display">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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 />
```