# j-FormTab

> j-FormTab : Le composant déplace le contenu de ce composant sous la balise <body> (en raison du positionnement) ; Le composant attend un tableau

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

- Le composant déplace le contenu de ce composant sous la balise `<body>` (à cause du positionnement)
- Le composant attend un tableau


__Configuration__ :

- `width {Number}` largeur de forme
- `widthlg {Number}` largeur de forme pour les appareils `lg` (par défaut : `config.width`)
- `widthmd {Number}` largeur de forme pour les appareils `md` (par défaut : `config.width`)
- `widthsm {Number}` largeur de forme pour les appareils `sm` (par défaut : `config.width`)
- `widthxs {Number}` largeur de forme pour les appareils `xs` (par défaut : `config.width`)
- `height {Number}` hauteur de forme
- Hauteur de forme `heightlg {Number}` pour les appareils `lg` (par défaut : `config.height`)
- Hauteur de forme `heightmd {Number}` pour les appareils `md` (par défaut : `config.height`)
- Hauteur de forme `heightsm {Number}` pour les appareils `sm` (par défaut : `config.height`)
- Hauteur de forme `heightxs {Number}` pour les appareils `xs` (par défaut : `config.height`)
- `margin {Number}` une marge par défaut entre les formulaires (par défaut : `10`)
- `marginlg {Number}` une marge par défaut pour les appareils `lg` (par défaut : `config.margin`)
- `marginmd {Number}` une marge par défaut pour les appareils `md` (par défaut : `config.margin`)
- `marginsm {Number}` une marge par défaut pour les appareils `sm` (par défaut : `config.margin`)
- `marginxs {Number}` une marge par défaut pour les appareils `xs` (par défaut : `config.margin`)
- `marginfullscreen {Number}` une marge par défaut pour le mode plein écran (par défaut : `20`)
- `marginfullscreenlg {Number}` une marge plein écran par défaut pour les appareils `lg` (par défaut : `config.marginfullscreen`)
- `marginfullscreenmd {Number}` une marge plein écran par défaut pour les appareils `md` (par défaut : `config.marginfullscreen`)
- `marginfullscreensm {Number}` une marge plein écran par défaut pour les appareils `sm` (par défaut : `config.marginfullscreen`)
- `marginfullscreenxs {Number}` une marge plein écran par défaut pour les appareils `xs` (par défaut : `config.marginfullscreen`)
- `submit {String}` lien vers une fonction globale `function(meta, data, hide)` et elle est exécutée si le bouton soumettre est enfoncé
- `cancel {String}` lien vers une fonction globale et il est exécuté si le bouton `cancel` est enfoncé
- `enter {Boolean}` capture automatiquement la clé `enter` et clique virtuellement sur le bouton de soumission (par défaut : `false`)
- `onclose {String}` un lien vers la fonction `function(item, close)` (optionnel)
- `onopen {String}` un lien vers la fonction `function(item, el)` (optionnel)
- `autofocus {Boolean}` active la mise au point automatique pour la première entrée (par défaut : `false`)
- __NOUVEAU__ `right {Number}` marge droite (par défaut : `0`)
- __NOUVEAU__ Marge inférieure `bottom {Number}` (par défaut : `0`)
- __NEW__ `useminheight {Boolean}` utilise `min-height` au lieu de l'attribut CSS `height` (par défaut : `false`)

__Bon à savoir__ :

- chaque élément de classe `cancel` sera utilisé comme bouton d'annulation

__Source de données__ :

```javascript
[
	{
		// Required
		id: 'YOUR_ID_OF_THE_FORM',
		name: 'YOUR_NAME_OF_THE_FORM',

		// Optional
		minimized: true,
		data: { blabla: '"data" will be cloned into the form scope' }
		// NEW: scope: false (disables scope)
		// NEW: scope: mycustomscopepath
	}
]
```

Utilisez-le avec `<ui-component name="formtab">`. 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="formtab" path="common.formtab">
	<script type="text/html">
		<div class="padding">
			YOUR CONTENT HERE.
		</div>
	</script>
</ui-component>

<script>
	var common = {};
	common.formtab = [];
	common.formtab.push({ id: '1', name: 'New message' });
	common.formtab.push({ id: '2', minimized: true, name: 'Message: John Deal' });
	common.formtab.push({ id: '3', minimized: true, name: 'Message: Denis Granec' });
</script>
```