# j-Display

> El componente calcula el intervalo entre visualizaciones automáticamente. El tipo de pantalla predeterminado es lg.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: f4709e5eb0d4096ba75d4bb727ccff2c04fc31ce8a8172d2cc1eec589dd57716
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

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