j-Display

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

A komponens a jelenlegi elem szerint mér egy kijelzőméretet. a WIDTH() módszert használja, és a jc-DISPLAY_SIZE-es formában CSS osztályot alkalmaz:

jc-xs extra kis kijelző (mobiltelefon)
jc-sm kis kijelző (tabletta)
jc-md közepes kijelző (Laptop)
jc-lg nagy kijelző (desktop számítógép)

konfiguráció:

delay {Number} a méret megszerzésének késése (default: 100 ms)
NEW: xs {Number} a maximális szélesség a kis kijelzőre (elsődleges: 768)
NEW: sm {Number} a kis kijelző maximális szélessége (előzetes: 992)
NEW: md {Number} a középső kijelző maximális szélessége (default: 1200)

Az összetevő automatikusan kiszámítja a kijelzők közötti intervallumot.A szabványos kijelző típusa lg.

Használja a <ui-component name="display">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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