# j-Layout2

> Criar layout é muito fácil.

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

- Este componente é um componente muito simples em comparação com o `j-Layout`.


__Configuração__:

- `parent` {String} pode conter o seletor `parent`, `window` ou jQuery para o método `closest` (default: `window`)
- `margin` {Número} adiciona margem para o `height` (default: `0`)
- `autoresize` {Boolean} permite o auto-resize (default: `true`)

__Métodos__:

- __IMPORTANT__ `component.show(type)` pode exibir um painel específico para dispositivos móveis, `type` pode ser `left`, `right` ou `main`
- `component.resizescrollbar(panel_type)` resissa uma barra de rolamento para um painel específico
- `component.scrolltop(panel_type)` para cima para um painel específico

__Tipos de Panel__:

- `left` - Panel de esquerda
- `right` em direção
- `top` (é o painel em cima de todos os painéis)
- O painel superior `top2` e usa a chave `top` na configuração (é entre o painel `left` e `right`)
- Pano de fundo `bottom` (é o painel no fundo de todos os painéis)
- O painel de fundo `bottom2` e usa a chave `bottom` na configuração (é entre o painel `left` e `right`)
- `main` conteúdo principal

__Layout__:

Criar layout é muito fácil.

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

__Atributos__:

- `data-type` deve conter um tipo de secção `top`, `top2`, `left`, `right`, `bottom`, `bottom2` ou `main`
- `data-size` contém um tamanho da seção `LG,MD,SM,XS` --> em pixels ou porcentagem, por exemplo: `200,200,200,0` (`0` significa oculto) ou `20%` (todos os valores herdarão `20%`)
- `data-scrollbar="margin:50;visible:1"` permite o scrollbar, valores possíveis:
	- `selector` {String} opcional, selector jQuery para contêiner de barras
	- `margin` {Número} margem de rolamento (default: `0`)
	- `visible` {Boolean} mostra o scrollbar

__Bom para saber__:

- Cada painel é um elemento `section` e deve conter o atributo `data-type="top"` com o tipo de painel.
- Defina os painéis que você vai usar
- Comprar todos os elementos de `section` não é importante

Use-o com `<ui-component name="layout2">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>
```