# j-Layout2

> Vytvoření layoutu je velmi snadné.

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

- Tato složka je velmi jednoduchá ve srovnání s `j-Layout`.


__Konfigurace__:

- `parent` {String} může obsahovat `parent`, `window` nebo jQuery selektor pro metodu `closest` (předvolený: `window`)
- `margin` {Číslo} přidává marže pro `height` (předvolený: `0`)
- `autoresize` {Boolean} umožňuje automatické rezize (předvolené: `true`)

__Metody__:

- __IMPORTANT__ `component.show(type)` může zobrazit konkrétní panel pro mobilní zařízení, `type` může být `left`, `right` nebo `main`
- `component.resizescrollbar(panel_type)` přehráva skříňku pro konkrétní panel
- `component.scrolltop(panel_type)` skříní na vrcholu pro konkrétní panel

__Panelové typy__:

- `left` levý panel
- `right` pravý panel
- `top` vrcholový panel (je to panel na vrcholu všech panelů)
- Top panel `top2` a používá klíč `top` v konfiguraci (je mezi panelem `left` a `right`)
- `bottom` spodní panel (je to panel na dně všech panelů)
- `bottom2` spodní panel a používá klíč `bottom` v konfiguraci (je mezi `left` a `right` panel)
- `main` hlavní obsah

__Layout__:

Vytvoření layoutu je velmi snadné.

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

__Atributy__:

- `data-type` musí obsahovat typ sekce `top`, `top2`, `left`, `right`, `bottom`, `bottom2` nebo `main`
- `data-size` obsahuje velikost sekce `LG,MD,SM,XS` -> v pixlech nebo procentech, například: `200,200,200,0` (`0` znamená skryté) nebo `20%` (všechny hodnoty budou dědit `20%`)
- `data-scrollbar="margin:50;visible:1"` umožňuje scrollbar, možné hodnoty:
	- `selector` {String} volitelný jQuery selektor pro skříňový kontejner
	- `margin` {Číslo} scrollbar marže (předvolené: `0`)
	- `visible` {Boolean} zobrazuje scrollbar

__Dobré vědět__:

- Každý panel je prvek `section` a musí obsahovat atribut `data-type="top"` s typem panelu
- Určete pouze panely, které budete používat
- Objednávka všech prvků `section` není důležitá

Použijte ji s `<ui-component name="layout2">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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