j-Display

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componentul măsoară o dimensiune a afișării în funcție de elementul curent. utilizează metoda WIDTH() și adaugă o clasă CSS în formularul jc-DISPLAY_SIZE:

jc-xs - ecran extra mic (telefoane mobile)
jc-sm display mic (tabletă)
jc-md display mediu (laptop)
jc-lg - ecran mare (computer de desktop)

Configurarea:

delay {Number} o întârziere pentru obținerea dimensiunii (default: 100 ms)
NEW: xs {Number} o lățime maximă pentru ecranul extra mic (default: 768)
NEW: sm {Number} o lățime maximă pentru ecranul mic (default: 992)
NEW: md {Number} o lățime maximă pentru ecranul mediu (default: 1200)

Componenta calculeaza automat intervalul dintre ecranuri. tipul de display standard este lg.

Utilizați-l cu <ui-component name="display">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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