j-Display

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

The component measures a display size according to the current element. It uses WIDTH() method and appends a CSS class in the form jc-DISPLAY_SIZE:

jc-xs extra small display (mobile phone)
jc-sm small display (tablet)
jc-md medium display (laptop)
jc-lg large display (desktop computer)

Configuration:

delay {Number} a delay for obtaining of size (default: 100 ms)
NEW: xs {Number} a maximum width for the extra small display (default: 768)
NEW: sm {Number} a maximum width for the small display (default: 992)
NEW: md {Number} a maximum width for the medium display (default: 1200)

The component calculates the interval between displays automatically. The default display type is lg.

Use it with <ui-component name="display">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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