# j-Layout2

> Crearea unui layout este foarte ușoară.

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

- Acest ingredient este un component foarte simplu în comparație cu `j-Layout`.


__Configurarea__:

- `parent` {String} poate conține `parent`, `window` sau jQuery selector pentru metoda `closest` (default: `window`)
- `margin` {Număr} adăuga marja pentru `height` (default: `0`)
- `autoresize` {Boolean} permite rezizarea automată (default: `true`)

__Metode__:

- __IMPORTANT__ `component.show(type)` poate afișa un anumit panel pentru dispozitive mobile, `type` poate fi `left`, `right` sau `main`
- `component.resizescrollbar(panel_type)` resizează un scrollbar pentru un anumit panou
- `component.scrolltop(panel_type)` scrolls la partea de sus pentru un anumit panel

__Tipuri de panouri__:

- `left` în partea stângă
- `right` de dreapta
- Panelul de top `top` (Panelul este pe partea superioară a tuturor panourilor)
- Panelul de sus `top2` și utilizează cheia `top` în configurare (este între panourile `left` și `right`)
- Panelul de fundal `bottom` (panelul este pe partea de jos a tuturor panourilor)
- Panelul de bază `bottom2` și utilizează cheia `bottom` în configurare (este între panourile `left` și `right`)
- Conținutul principal `main`

__Layout__:

Crearea unui layout este foarte ușoară.

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

__Atributele__:

- `data-type` trebuie să conțină un tip de secțiune `top`, `top2`, `left`, `right`, `bottom`, `bottom2` sau `main`
- `data-size` conține o dimensiune a secțiunii `LG,MD,SM,XS` --> în pixeli sau procente, de exemplu: `200,200,200,0` (`0` înseamnă ascuns) sau `20%` (toate valorile vor moșteni `20%`)
- `data-scrollbar="margin:50;visible:1"` permite scrollbar, valorile posibile:
	- `selector` {String} opțional, jQuery selector pentru container scrollbar
	- `margin` {Număr} marginea scrollbar (default: `0`)
	- `visible` {Boolean} arată scrollbarul

__bine să știi__:

- Fiecare panel este elementul `section` și trebuie să conțină atributul `data-type="top"` cu tipul de panel
- Definiți doar panourile pe care le veți folosi
- Comanda tuturor elementelor `section` nu este importantă

Utilizați-l cu `<ui-component name="layout2">`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
<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>
```