# j-Layout2

> Creare il layout è molto semplice.

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

- Questo componente è un componente molto semplice rispetto al `j-Layout`.


__Configurazione__:

- `parent` {String} può contenere il selettore `parent`, `window` o jQuery per il metodo `closest` (default: `window`)
- `margin` {Numero} aggiunge il margine per la `height` (default: `0`)
- `autoresize` {Boolean} consente la resisione automatica (default: `true`)

__Metodi__:

- __IMPORTANT__ `component.show(type)` può mostrare un pannello specifico per dispositivi mobili, `type` può essere `left`, `right` o `main`
- `component.resizescrollbar(panel_type)` riproduce una scrollbar per un pannello specifico
- `component.scrolltop(panel_type)` scorrere in alto per un pannello specifico

__Tipi di pannello__:

- Il pannello di sinistra `left`
- Il pannello di destra `right`
- Il pannello superiore di `top` (è il pannello sopra tutti i pannelli)
- Il pannello superiore `top2` utilizza la chiave `top` nella configurazione (è tra il pannello `left` e `right`)
- Il pannello di fondo `bottom` (il pannello è al fondo di tutti i pannelli)
- Il pannello di fondo `bottom2` e utilizza la chiave `bottom` nella configurazione (è tra il pannello `left` e `right`)
- Il contenuto principale di `main`

__Il layout__:

Creare il layout è molto semplice.

```html
<div data-type="" data-size="" data-scrollbar=""></div>
```

__Attributi__:

- `data-type` deve contenere un tipo di sezione `top`, `top2`, `left`, `right`, `bottom`, `bottom2` o `main`
- `data-size` contiene una dimensione della sezione `LG,MD,SM,XS` --> in pixel o percentuale, per esempio: `200,200,200,0` (`0` significa nascosto) o `20%` (tutti i valori saranno ereditati da `20%`)
- `data-scrollbar="margin:50;visible:1"` consente scrollbar, valori possibili:
	- `selector` {String} selettore opzionale jQuery per il contenitore di scrollbar
	- `margin` {Numero} margine scrollbar (default: `0`)
	- `visible` {Boolean} mostra la scrollbar

__Buono sapere__:

- Ogni pannello è un elemento `section` e deve contenere l'attributo `data-type="top"` con il tipo di pannello
- Definisci solo i pannelli che utilizzerai
- L'ordine di tutti gli elementi `section` non è importante

Utilizzare con `<ui-component name="layout2">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

```html example.html
<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>
```