j-Display

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

El componente mide un tamaño de visualización según el elemento actual. Utiliza el método WIDTH() y agrega una clase CSS con el formato jc-DISPLAY_SIZE:

jc-xs pantalla extra pequeña (teléfono móvil)
jc-sm pantalla pequeña (tableta)
jc-md pantalla mediana (portátil)
jc-lg pantalla grande (computadora de escritorio)

Configuración:

delay {Number} un retraso en la obtención del tamaño (predeterminado: 100 ms)
NUEVO: xs {Number} un ancho máximo para la pantalla extra pequeña (predeterminado: 768)
NUEVO: sm {Number} un ancho máximo para la pantalla pequeña (predeterminado: 992)
NUEVO: md {Number} un ancho máximo para la pantalla mediana (predeterminado: 1200)

El componente calcula el intervalo entre visualizaciones automáticamente. El tipo de visualización predeterminado es lg.

Úselo con <ui-component name="display">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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 />