j-Display

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Το συστατικό μετρά το μέγεθος της οθόνης σύμφωνα με το τρέχον στοιχείο. Χρησιμοποιεί τη μέθοδο WIDTH() και προσθέτει μια κατηγορία CSS στη μορφή jc-DISPLAY_SIZE:

jc-xs επιπλέον μικρή οθόνη (αυτοκίνητο τηλέφωνο)
jc-sm μικρή οθόνη (tablet)
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 Συγγραφέας: Peter Širka. πηγή: το 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 />