# j-Layout2

> Het maken van een layout is heel eenvoudig.

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

- Deze component is een zeer eenvoudige component in vergelijking met `j-Layout`.


__Configuratie__:

- `parent` {String} kan een `parent`, `window` of jQuery selector voor de `closest`-methode bevatten (default: `window`)
- `margin` {Nummer} voegt de margin toe voor de `height` (default: `0`)
- `autoresize` {Boolean} maakt auto-resize mogelijk (default: `true`)

__Methoden__:

- __IMPORTANT__ `component.show(type)` kan een specifiek panel voor mobiele apparaten tonen, `type` kan `left`, `right` of `main` zijn
- `component.resizescrollbar(panel_type)` herstelt een scrollbar voor een specifiek panel
- `component.scrolltop(panel_type)` scrolls naar de top voor een specifiek panel

__Panel Types__:

- `left` linker
- `right` rechter panel
- `top` toppanel (het panel is boven alle panelen)
- `top2` toppanel en gebruikt de `top` sleutel in de configuratie (het is tussen `left` en `right` panel)
- `bottom` onderste panelen (het paneel aan de onderkant van alle panelen)
- `bottom2` onderste panel en gebruikt de `bottom` sleutel in de configuratie (het is tussen `left` en `right` panel)
- `main` belangrijkste inhoud

__Layout__:

Het maken van een layout is heel eenvoudig.

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

__Attributen__:

- `data-type` moet een type sectie van `top`, `top2`, `left`, `right`, `bottom`, `bottom2` of `main` bevatten.
- `data-size` bevat een afdeling van `LG,MD,SM,XS` --> in pixels of percentages, bijvoorbeeld: `200,200,200,0` (`0` betekent verborgen) of `20%` (alle waarden zullen `20%`)
- `data-scrollbar="margin:50;visible:1"` zorgt voor scrollbar, mogelijke waarden:
	- `selector` {String} optioneel, jQuery selector voor scrollbar container
	- `margin` {Nummer} scrollbar marge (default: `0`)
	- `visible` {Boolean} toont de scrollbar

__Goed om te weten__:

- Elk panel is het element `section` en moet een `data-type="top"`-attribuut bevatten met een paneltype.
- Bepaal alleen de panelen die u gebruikt
- Het bestellen van alle `section`-elementen is niet belangrijk

Gebruik het met `<ui-component name="layout2">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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