j-Display

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Il componente misura una dimensione dello schermo in base all'elemento corrente. utilizza il metodo WIDTH() e aggiunge una classe CSS nel modulo jc-DISPLAY_SIZE:

jc-xs display extra piccolo (telefono mobile)
Il piccolo display di jc-sm (tabletta)
Display medio di jc-md (laptop)
jc-lg grande display (computer desktop)

Configurazione:

delay {Number} un ritardo per ottenere la dimensione (default: 100 ms)
NEW: xs {Number} una larghezza massima per l'esposizione minore (default: 768)
NEW: sm {Number} una larghezza massima per il piccolo display (default: 992)
NEW: md {Number} una larghezza massima per la visualizzazione media (default: 1200)

Il componente calcola automaticamente l'intervallo tra i display. il tipo di display predefinito è lg.

Utilizzare con <ui-component name="display">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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 />