j-Display

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component meet een afbeeldingsgrootte volgens het huidige element. Het maakt gebruik van de WIDTH()-methode en voegt een CSS-klasse toe in het formulier jc-DISPLAY_SIZE:

jc-xs extra kleine afbeelding (mobiele telefoon)
jc-sm kleine afbeelding (tablet)
jc-md medium display (Laptop)
jc-lg grote afbeelding (desktop computer)

Configuratie:

delay {Number} een vertraging voor het verkrijgen van de grootte (default: 100 ms)
NEW: xs {Number} een maximale breedte voor de extra kleine afbeelding (default: 768)
NEW: sm {Number} een maximale breedte voor het kleine display (default: 992)
NEW: md {Number} een maximale breedte voor het medium display (default: 1200)

De component berekent automatisch het interval tussen de afbeeldingen.De standaard type display is lg.

Gebruik het met <ui-component name="display">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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