# j-Layout2

> La réalisation de la mise en page est très simple.

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

- Ce composant est un composant beaucoup plus simple comparé au `j-Layout`.


__Configuration__ :

- `parent` {String} peut contenir `parent`, `window` ou un sélecteur jQuery pour la méthode `closest` (par défaut : `window`)
- `margin` {Number} ajoute une marge pour le `height` (par défaut : `0`)
- `autoresize` {Boolean} active le redimensionnement automatique (par défaut : `true`)

__Méthodes__ :

- __IMPORTANT__ `component.show(type)` peut afficher un panneau spécifique pour les appareils mobiles, `type` peut être `left`, `right` ou `main`
- `component.resizescrollbar(panel_type)` redimensionne une barre de défilement pour un panneau spécifique
- `component.scrolltop(panel_type)` défile vers le haut pour un panneau spécifique

__Types de panneaux__ :

- `left` panneau gauche
- `right` panneau droit
- Panneau supérieur `top` (c'est le panneau au-dessus de tous les panneaux)
- Panneau supérieur `top2` et utilise la clé `top` dans la configuration (elle se situe entre le panneau `left` et le panneau `right`)
- Panneau inférieur `bottom` (c'est le panneau au bas de tous les panneaux)
- Panneau inférieur `bottom2` et utilise la clé `bottom` dans la configuration (elle se situe entre le panneau `left` et `right`)
- Contenu principal de `main`

__Mise en page__ :

La réalisation de la mise en page est très simple.

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

__Attributs__ :

- `data-type` doit contenir un type de section `top`, `top2` ,`left`, `right`, `bottom`, `bottom2` ou `main`
- `data-size` contient une taille de section `LG,MD,SM,XS` --> en pixels ou pourcentage, exemple : `200,200,200,0` (`0` signifie caché) ou `20%` (toutes les valeurs hériteront de `20%`)
- `data-scrollbar="margin:50;visible:1"` active la barre de défilement, valeurs possibles :
	- `selector` {String} facultatif, sélecteur jQuery pour le conteneur de barre de défilement
	- Marge de la barre de défilement `margin` {Number} (par défaut : `0`)
	- `visible` {Boolean} affiche la barre de défilement

__Bon à savoir__ :

- chaque panneau est un élément `section` et doit contenir l'attribut `data-type="top"` avec le type de panneau
- définir uniquement les panneaux que vous utiliserez
- l'ordre de tous les éléments `section` n'est pas important

Utilisez-le avec `<ui-component name="layout2">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```