# j-FormTab

> j-FormTab: De component verplaatst de inhoud van deze component onder <body>-tag (door positionering); De componente wacht op een reeks

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

- De component beweegt de inhoud van deze component onder het `<body>`-tag (door positionering)
- De component verwacht Array


__Configuratie__:

- `width {Number}` breedte vorm
- `widthlg {Number}` breedte van het formulier voor `lg` apparaten (default: `config.width`)
- `widthmd {Number}` breedte van het formulier voor `md` apparaten (default: `config.width`)
- `widthsm {Number}` breedte van het formulier voor `sm` apparaten (default: `config.width`)
- `widthxs {Number}` breedte van het formulier voor `xs` apparaten (default: `config.width`)
- `height {Number}` Hoogte van vorm
- `heightlg {Number}` hoogte van de vorm voor `lg` apparaten (default: `config.height`)
- `heightmd {Number}` hoogte van de vorm voor `md` apparaten (default: `config.height`)
- `heightsm {Number}` hoogte van de vorm voor `sm` apparaten (default: `config.height`)
- `heightxs {Number}` hoogte van de vorm voor `xs` apparaten (default: `config.height`)
- `margin {Number}` een standaardmarge tussen formulieren (default: `10`)
- `marginlg {Number}` een standaardmarge voor `lg` apparaten (de standaard: `config.margin`)
- `marginmd {Number}` een standaardmarge voor `md` apparaten (de standaard: `config.margin`)
- `marginsm {Number}` een standaardmarge voor `sm` apparaten (de standaard: `config.margin`)
- `marginxs {Number}` een standaardmarge voor `xs` apparaten (de standaard: `config.margin`)
- `marginfullscreen {Number}` een standaardmarge voor volledige schermmodus (default: `20`)
- `marginfullscreenlg {Number}` een standaard fullscreen margin voor `lg` apparaten (de standaard: `config.marginfullscreen`)
- `marginfullscreenmd {Number}` een standaard fullscreen margin voor `md` apparaten (de standaard: `config.marginfullscreen`)
- `marginfullscreensm {Number}` een standaard fullscreen margin voor `sm` apparaten (de standaard: `config.marginfullscreen`)
- `marginfullscreenxs {Number}` een standaard fullscreen margin voor `xs` apparaten (de standaard: `config.marginfullscreen`)
- `submit {String}` verbinding met een wereldwijde functie `function(meta, data, hide)` en het wordt uitgevoerd als de submit-knop wordt gedrukt
- `cancel {String}` verbinding met een wereldwijde functie en het wordt uitgevoerd als de `cancel` knop wordt gedrukt
- `enter {Boolean}` slaat de `enter` sleutel automatisch op en klikt virtueel op de submit-knop (default: `false`)
- `onclose {String}` een link naar functie `function(item, close)` (optional)
- `onopen {String}` een link naar functie `function(item, el)` (optional)
- `autofocus {Boolean}` zorgt voor een auto-focus voor de eerste input (default: `false`)
- __NEW__ `right {Number}` rechter margin (defualt: `0`)
- __NEW__ `bottom {Number}` ondermarge (defualt: `0`)
- __NEW__ `useminheight {Boolean}` gebruikt `min-height` in plaats van `height` CSS attribute (default: `false`)

__Goed om te weten__:

- Elk element met de `cancel`-klasse wordt gebruikt als een annuleringsknop

__Data-bron__:

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

Gebruik het met `<ui-component name="formtab">`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="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>
```