j-Display

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Składnik mierzy rozmiar wyświetlacza według bieżącego elementu. używa metody WIDTH() i dodaje klasę CSS w formularzu jc-DISPLAY_SIZE:

jc-xs dodatkowo mały wyświetlacz (telefon komórkowy)
jc-sm mały wyświetlacz (tableta)
Wyświetlacz średni jc-md (laptop)
Wystawa duża jc-lg (komputer desktopowy)

Konfiguracja:

delay {Number} opóźnienie w uzyskaniu rozmiaru (default: 100 ms)
NEW: xs {Number} maksymalna szerokość dla dodatkowego małego wyświetlacza (default: 768)
NEW: sm {Number} maksymalna szerokość dla małego wyświetlacza (default: 992)
NEW: md {Number} maksymalna szerokość dla średniego wyświetlacza (default: 1200)

Składnik oblicza automatycznie przerwę między wyświetlaczami. standardowy typ wyświetlania to lg.

Użyj go z <ui-component name="display">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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 />