Work with Tabbar
DHTMLX Tabbar inherits its API from dhtmlxLayout. So, you can apply any methods of Layout to manipulate Tabbar.
Adding/removing tabs
You can quickly add/remove tabs of Tabbar on the fly with the help of the corresponding methods - addTab() and removeTab().
The addTab() method takes two parameters:
view | (object) an object of a tab. It may include the following properties:
|
index | (number) the position to add a tab into |
// adding a new tab
tabbar.addTab({tab: "tab-" + nextTab++, css:"panel flex"}, 0);
Related sample: Tabbar. Add / remove tab
The removeTab() method expects the id of a tab you want to remove as its parameter. You can get the id of a tab via the getId() method:
// removing a tab
const id = tabbar.getId(0);
tabbar.removeTab(id);
Related sample: Tabbar. Add / remove tab
Getting the id of a tab
In order to get the id of a tab, make use of the getId() method. It takes the index of the tab in question as a parameter:
const id = tabbar.getId(0);
Setting/getting the active tab
It is possible to set the active tab via Tabbar API, i.e. with the help of the setActive() method. It takes the id of a tab as a parameter:
const tabbar = new dhx.Tabbar("tabbar_container", {
mode: "top",
views:[
{ id: "1", tab: "tab-1", css:"panel flex"},
{ id: "2", tab: "tab-2", css:"panel flex"},
{ id: "3", tab: "tab-3", css:"panel flex"},
{ id: "4", tab: "tab-4", css:"panel flex"}
]
});
tabbar.setActive("2");
Related sample: Tabbar. Set active
To identify what tab is currently active, apply the getActive() method. It will return the id of the active tab.
const tabbar = new dhx.Tabbar("tabbar_container", {
mode: "top",
views:[
{ id: "1", tab: "tab-1", css:"panel flex"},
{ id: "2", tab: "tab-2", css:"panel flex"},
{ id: "3", tab: "tab-3", css:"panel flex"},
{ id: "4", tab: "tab-4", css:"panel flex"}
]
});
const active = tabbar.getActive(); // -> "2"
Related sample: Tabbar. Get active
Enabling/disabling a tab
To enable a tab, use the enableTab() method:
tabbar.enableTab("London");
To disable a tab, use the disableTab() method:
tabbar.disableTab("London");
// -> true|false
Related sample: Tabbar. Disable tab
Checking if a tab is disabled
To check if a tab is disabled, pass the id of the tab as an argument to the isDisabled() method:
tabbar.isDisabled("London"); // -> returns true/false
To check if a currently active tab is disabled, call the isDisabled() method without parameters:
tabbar.isDisabled(); // -> returns true/false
Related sample: Tabbar. Is disabled tab
Attaching a component to a cell
You can easily attach any DHTMLX component (except for Message, Popup, Window) to a cell of Tabbar using the attach method of a cell:
const dataview = new dhx.DataView(null, {
template: dataviewTemplate,
itemsInRow: 3,
gap: "10px"
});
dataview.data.parse(dataset);
tabbar.getCell("dataview").attach(dataview);
Related sample: Tabbar. Attach widget
The Message, Popup, Window components can't be attached to the Tabbar cell because these components can't have the parent container due to their architecture principles.