j-Display

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant mesure une taille d'affichage en fonction de l'élément actuel. Il utilise la méthode WIDTH() et ajoute une classe CSS sous la forme jc-DISPLAY_SIZE :

jc-xs très petit écran (téléphone portable)
jc-sm petit écran (tablette)
Écran moyen jc-md (ordinateur portable)
Grand écran jc-lg (ordinateur de bureau)

Configuration :

delay {Number} un délai d'obtention de la taille (par défaut : 100 ms)
NOUVEAU : xs {Number} une largeur maximale pour le très petit écran (par défaut : 768)
NOUVEAU : sm {Number} une largeur maximale pour le petit écran (par défaut : 992)
NOUVEAU : md {Number} une largeur maximale pour l'affichage moyen (par défaut : 1200)

Le composant calcule automatiquement l'intervalle entre les affichages. Le type d'affichage par défaut est lg.

Utilisez-le avec <ui-component name="display">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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 />