# j-Layout2

> Tworzenie layoutów jest bardzo proste.

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

- Jest to bardzo prosty składnik w porównaniu do `j-Layout`.


__Konfiguracja__:

- `parent` {String} może zawierać wybór `parent`, `window` lub jQuery dla metody `closest` (default: `window`)
- `margin` {Liczba} dodaje marżę dla `height` (default: `0`)
- `autoresize` {Boolean} umożliwia automatyczne rozmiary (default: `true`)

__Metody__:

- __IMPORTANT__ `component.show(type)` może wyświetlać konkretny panel dla urządzeń przenośnych, `type` może być `left`, `right` lub `main`
- `component.resizescrollbar(panel_type)` odtwarza pasek do określonego panelu
- `component.scrolltop(panel_type)` skróci się do góry dla konkretnego panelu

__Rodzaje paneli__:

- Płytki `left`
- Płytka prawica `right`
- Panel `top` (Panel jest na górze wszystkich paneli)
- Panel `top2` i używa klucza `top` w konfiguracji (jest między panelem `left` a `right`)
- Panel `bottom` (Panel znajduje się na dole wszystkich paneli)
- Panel `bottom2` i używa klucza `bottom` w konfiguracji (jest między panelem `left` a `right`)
- `main` zawartość

__Layout__:

Tworzenie layoutów jest bardzo proste.

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

__atrybuty__:

- `data-type` musi zawierać rodzaj sekcji `top`, `top2`, `left`, `right`, `bottom`, `bottom2` lub `main`
- `data-size` zawiera rozmiar sekcji `LG,MD,SM,XS` -> w pikselach lub procentach, na przykład: `200,200,200,0` (`0` oznacza ukryte) lub `20%` (wszystkie wartości będą dziedziczyć `20%`)
- `data-scrollbar="margin:50;visible:1"` umożliwia skręcanie, możliwe wartości:
	- `selector` {String} opcjonalny, jQuery selektor dla kontenera skręcającego
	- `margin` {Liczba} margines scrollbar (default: `0`)
	- `visible` {Boolean} wyświetla skrzynkę

__Dobrze wiedzieć__:

- Każdy panel jest elementem `section` i musi zawierać atrybut `data-type="top"` z typem panelu
- Określ panele, które będziesz używać
- Zamówienie wszystkich elementów `section` nie ma znaczenia

Użyj go z `<ui-component name="layout2">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>
```