# j-Layout2

> Making of layout is very easy.

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

- This component is a much simple component compared to `j-Layout`.


__Configuration__:

- `parent` {String} can contain `parent`, `window` or jQuery selector for the `closest` method (default: `window`)
- `margin` {Number} adds margin for the `height` (default: `0`)
- `autoresize` {Boolean} enables auto-resize (default: `true`)

__Methods__:

- __IMPORTANT__ `component.show(type)` can show a specific panel for mobile devices, `type` can be `left`, `right` or `main`
- `component.resizescrollbar(panel_type)` resizes a scrollbar for a specific panel
- `component.scrolltop(panel_type)` scrolls to top for a specific panel

__Panel types__:

- `left` left panel
- `right` right panel
- `top` top panel (it's panel on top of all panels)
- `top2` top panel and uses `top` key in the config (it is between `left` and `right` panel)
- `bottom` bottom panel (it's panel on bottom of all panels)
- `bottom2` bottom panel and uses `bottom` key in the config (it is between `left` and `right` panel)
- `main` main content

__Layout__:

Making of layout is very easy.

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

__Attributes__:

- `data-type` must contain a type of section `top`, `top2` ,`left`, `right`, `bottom`, `bottom2` or `main`
- `data-size` contains a size of section `LG,MD,SM,XS` --> in pixels or percentage, example: `200,200,200,0` (`0` means hidden) or `20%` (all values will inherit `20%`)
- `data-scrollbar="margin:50;visible:1"` enables scrollbar, possible values:
	- `selector` {String} optional, jQuery selector for scrollbar container
	- `margin` {Number} scrollbar margin (default: `0`)
	- `visible` {Boolean} shows the scrollbar

__Good to know__:

- each panel is `section` element and must contain `data-type="top"` attribute with type of panel
- define panels only which you will use
- ordering of all `section` elements isn't important

Use it with `<ui-component name="layout2">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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