# j-Layout2

> Hacer el diseño es muy fácil.

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

- Este componente es mucho más simple en comparación con `j-Layout`.


__Configuración__:

- `parent` {String} puede contener `parent`, `window` o selector jQuery para el método `closest` (predeterminado: `window`)
- `margin` {Número} agrega margen para `height` (predeterminado: `0`)
- `autoresize` {Booleano} habilita el cambio de tamaño automático (predeterminado: `true`)

__Métodos__:

- __IMPORTANTE__ `component.show(type)` puede mostrar un panel específico para dispositivos móviles, `type` puede ser `left`, `right` o `main`.
- `component.resizescrollbar(panel_type)` cambia el tamaño de una barra de desplazamiento para un panel específico
- `component.scrolltop(panel_type)` se desplaza hacia arriba para ver un panel específico

__Tipos de paneles__:

- `left` panel izquierdo
- `right` panel derecho
- `top` panel superior (es el panel encima de todos los paneles)
- Panel superior `top2` y utiliza la clave `top` en la configuración (está entre el panel `left` y `right`)
- Panel inferior `bottom` (es el panel en la parte inferior de todos los paneles)
- Panel inferior `bottom2` y utiliza la clave `bottom` en la configuración (está entre el panel `left` y `right`)
- `main` contenido principal

__Diseño__:

Hacer el diseño es muy fácil.

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

__Atributos__:

- `data-type` debe contener un tipo de sección `top`, `top2`, `left`, `right`, `bottom`, `bottom2` o `main`.
- `data-size` contiene un tamaño de sección `LG,MD,SM,XS` --> en píxeles o porcentaje, ejemplo: `200,200,200,0` (`0` significa oculto) o `20%` (todos los valores heredarán `20%`)
- `data-scrollbar="margin:50;visible:1"` habilita la barra de desplazamiento, valores posibles:
	- `selector` {String} opcional, selector jQuery para contenedor de barra de desplazamiento
	- `margin` {Número} margen de la barra de desplazamiento (predeterminado: `0`)
	- `visible` {Booleano} muestra la barra de desplazamiento

__Es bueno saberlo__:

- cada panel es un elemento `section` y debe contener el atributo `data-type="top"` con el tipo de panel
- define solo los paneles que usarás
- el pedido de todos los elementos `section` no es importante

Úselo con `<ui-component name="layout2">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>
```