# Tab Group
The *Tab Group* component is completely redesigned as a much cleaner implementation.
The component is independent but should be used after the *toolbar top* because this is the way the UI is designed.
## Context
```html
...
...
...
...
```
## Layout
```html
...
Tab Name
...
```
This shall be self-explaining. The `` is optional but of course, if it does not exist, there will be no close button.
### tab-group
The `` element does not need any specific attributes. It is recommended to listen for events on the *tab-group*. More about events you will see in [API](#api)
### tab-item
#### Fixed
To fix a tab item, just set its `type` to `fixed`.
```html
...
Fixed Tab
...
```
#### Special Adding Tab
A tab item can also have an `action` which is recommended for the tab on the right side. This tab would be used to add tabs using the UI.
```html
...
...
```
### Example
```html
Fixed Tab
Tab 2
Tab 3
```
## API
### Methods
#### Add Tab
To add a tab to a `` you should call the `addTab` method on the *tab group* element.
```javascript
const myNewTab = myTabGroup.addTab({
position: "last", // "last" or "first"
closeBtn: true, // Wether the tab can be closed using a button within it
isActive: true, // Wether the tab item will be the active one
animated: true, // Wether an animation will be shown when adding the tab item
content: document.createTextNode("New Tab") // Node or string
});
// Log the new tab item
console.log(myNewTab);
```
#### Close Tab
To close a tab you can use the method `closeTab` on your `` or the method `close` on the `` instead.
##### closeTab
```javascript
myTabGroup.closeTab(myTabItem, {
animated: true // Wether an animation will be shown when closing the tab item
});
```
##### close
```javascript
myTabItem.close({
animated: true // Wether an animation will be shown when closing the tab item
});
```
#### Move Tab
To move a tab item you can use the method `moveTab` on your `` or the method `move` on the `` instead.
##### moveTab
```javascript
const index = 1;
// Moves 'myTabItem' to position 1 (2nd).
myTabGroup.moveTab(myTabItem, index);
```
##### move
```javascript
const index = 1;
// Moves 'myTabItem' to position 1 (2nd).
myTabItem.move(index);
```
#### Activate Tab
To activate a tab item you can use the method `activateTab` on your `` or the method `activate` on the `` tab element instead.
##### activateTab
```javascript
myTabGroup.activateTab(myTabItem);
```
##### activate
```javascript
myTabItem.activate();
```
### Events
All events that are connected to an existing `` are fired on the `` but they will bubble up to the ``. Only the event `tabAdd` will still be fired on the `` because it does not make sense to dire an event for a `` we actually do not know.
Therefore all events can be handled on the `` directly.
#### tabActivate
##### Global
```javascript
// Handle all tab activations for the whole group
myTabGroup.addEventListener("tabActivate", function(event) {
console.log(event);
});
```
##### Local
```javascript
// Handle tab activations for a specific tab-item
myTabItem.addEventListener("tabActivate", function(event) {
console.log(event);
});
```
#### tabClose
##### Global
```javascript
// Handle all tab closings for the whole group
myTabGroup.addEventListener("tabClose", function(event) {
console.log(event);
});
```
##### Local
```javascript
// Handle tab closing for a specific tab-item
myTabItem.addEventListener("tabClose", function(event) {
console.log(event);
});
```
#### tabAdd
##### Global
```javascript
// Handle all tab additions for the whole group
myTabGroup.addEventListener("tabAdd", function(event) {
console.log(event);
});
```
#### tabMove
##### Global
```javascript
// Handle all tab movements for the whole group
myTabGroup.addEventListener("tabMove", function(event) {
console.log(event);
});
```
##### Local
```javascript
// Handle tab movements for a specific tab-item
myTabItem.addEventListener("tabMove", function(event) {
console.log(event);
});
```