# j-Layout2

> Vytvorenie rozloženia je veľmi jednoduché.

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

- Tento komponent je oveľa jednoduchý komponent v porovnaní so `j-Layout`.


__Konfigurácia__:

- `parent` {String} môže obsahovať `parent`, `window` alebo selektor jQuery pre metódu `closest` (predvolené: `window`)
- `margin` {číslo} pridáva maržu pre `height` (predvolené: `0`)
- `autoresize` {Boolean} umožňuje automatickú zmenu veľkosti (predvolené: `true`)

__Metódy__:

- __IMPORTANT__ `component.show(type)` môže zobrazovať špecifický panel pre mobilné zariadenia, `type` môže byť `left`, `right` alebo `main`
- `component.resizescrollbar(panel_type)` zmení veľkosť posúvača pre konkrétny panel
- `component.scrolltop(panel_type)` sa posúva nahor pre konkrétny panel

__Typy panelov__:

- `left` ľavý panel
- Pravý panel `right`
- `top` horný panel (je to panel na vrchu všetkých panelov)
- horný panel `top2` a v konfigurácii používa kľúč `top` (je medzi panelom `left` a `right`)
- spodný panel `bottom` (je to panel v spodnej časti všetkých panelov)
- spodný panel `bottom2` a v konfigurácii používa kľúč `bottom` (je medzi panelom `left` a `right`)
- hlavný obsah `main`

__Rozloženie__:

Vytvorenie rozloženia je veľmi jednoduché.

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

__Atribúty__:

- `data-type` musí obsahovať typ sekcie `top`, `top2`, `left`, `right`, `bottom`, `bottom2` alebo `main`
- `data-size` obsahuje veľkosť sekcie `LG,MD,SM,XS` --> v pixeloch alebo percentoch, napríklad: `200,200,200,0` (`0` znamená skryté) alebo `20%` (všetky hodnoty budú zdedené `20%`)
- `data-scrollbar="margin:50;visible:1"` umožňuje scrollbar, možné hodnoty:
	- `selector` {String} voliteľný, jQuery selektor pre skrutkovač
	- `margin` {Číslo} scrollbar margin (predvolené: `0`)
	- `visible` {Boolean} ukazuje scrollbar

__Je dobré vedieť__:

- každý panel je prvkom `section` a musí obsahovať atribút `data-type="top"` s typom panelu
- definujte len panely, ktoré budete používať
- poradie všetkých prvkov `section` nie je dôležité

Použite ho so `<ui-component name="layout2">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>
```