# j-Display

> Componentul calculează automat intervalul dintre ecrane. tipul de afișare standard este lg.

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

Componentul măsoară o dimensiune a afișării în funcție de elementul curent. utilizează metoda `WIDTH()` și adaugă o clasă CSS în formularul `jc-DISPLAY_SIZE`:

- `jc-xs` - ecran extra mic (telefoane mobile)
- `jc-sm` display mic (tabletă)
- `jc-md` display mediu (laptop)
- `jc-lg` - ecran mare (computer de desktop)

__Configurarea__:

- `delay {Number}` o întârziere pentru obținerea dimensiunii (default: `100` ms)
- __NEW__: `xs {Number}` o lățime maximă pentru ecranul extra mic (default: `768`)
- __NEW__: `sm {Number}` o lățime maximă pentru ecranul mic (default: `992`)
- __NEW__: `md {Number}` o lățime maximă pentru ecranul mediu (default: `1200`)

Componenta calculeaza automat intervalul dintre ecranuri. tipul de display standard este `lg`.

Utilizați-l cu `<ui-component name="display">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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