j-Display

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

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.

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