j-Display

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

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.

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