j-Display

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Съставът измерва размера на дисплея според текущия елемент. използва метода WIDTH() и прилага клас CSS във формата jc-DISPLAY_SIZE:

jc-xs Малък дисплей (мобилен телефон)
jc-sm малък дисплей (таблетка)
jc-md Среден дисплей (Laptop)
jc-lg Голям дисплей (компютър на работното място)

Конфигуриране:

delay {Number} закъснение за получаване на размери (предварително: 100 ms)
NEW: xs {Number} максимална ширина за допълнително малък дисплей (предварително: 768)
NEW: sm {Number} максимална ширина за малък дисплей (предварително: 992)
NEW: md {Number} максимална ширина за средния дисплей (предварително: 1200)

Съставът изчислява интервала между дисплеите автоматично. lg.

Използвайте го с <ui-component name="display">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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 />