j-Display

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente misst eine Anzeigegröße entsprechend dem aktuellen Element. Es verwendet die Methode WIDTH() und hängt eine CSS-Klasse in der Form jc-DISPLAY_SIZE an:

jc-xs extra kleines Display (Mobiltelefon)
jc-sm kleines Display (Tablet)
jc-md mittleres Display (Laptop)
jc-lg großes Display (Desktop-Computer)

Konfiguration:

delay {Number} eine Verzögerung für den Erhalt der Größe (Standard: 100 ms)
NEU: xs {Number} eine maximale Breite für das extra kleine Display (Standard: 768)
NEU: sm {Number} eine maximale Breite für das kleine Display (Standard: 992)
NEU: md {Number} eine maximale Breite für die mittlere Anzeige (Standard: 1200)

Die Komponente berechnet den Abstand zwischen den Anzeigen automatisch. Der Standardanzeigetyp ist lg.

Verwenden Sie es mit <ui-component name="display">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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