Tabview is a hybrid component that is made of a multiview and tabbar.
Tabview allows for quick initialization of a multiview with a built-in ability to switch between the views.
It also features dedicated methods to add and remove views together with the corresponding tabs.
There's no need to create a multiview and switching buttons for it. Everything lies within one and the same "tabview" component with cells property that contains collections of views.
Tabview
webix.ui({
view: "tabview",
cells: [
{
header: "List",
body: {
id: "listView",
view: "list", ...
}
},
{
header: "Form",
body: {
id: "formView",
view: "form", ...
}
}
]
});
Each tabview cell features:
Note that switching between views is enabled automatically via a tabbar control. For more customization, use a multiview component and choose the needed switching method.
The hybrid nature of a tabview allows configuring each of its parts separately:
These configuration objects may contain native properties of multiview and tabbar that need to be redefined. If the configurations are omitted, default values will be used.
webix.ui({
view:"tabview",
id:"my_tabview",
cells: [],
tabbar:{
...
},
multiview:{
...
}
});
var tabbarObj = $$("my_tabview").getTabbar();
var multiviewObj = $$("my_tabview").getMultiview();
All the API methods, events and properties of a ui.tabbar and ui.multiview respectively are applicable to these objects.
By default the switching of tabview tabs is not animated. Since animation is a multiview feature, it can be enabled within multiview configuration.
view:"taview",
cells:[],
multiview:{
animate:true
}
The animate property may take an object with advanced animation settings.
Icons for the tabbar tabs are set via additional HTML in the tab header:
view: "tabview",
cells: [
{ header: "<span class='webix_icon fa-film'></span>List",
body:{}
}
]
Related sample: Multiview Tabbar with Icons
More about different types of defining icons in Webix you can learn in the Icons with UI Components article.
Closing functionality is a tabbar feature.
To make all tabs closable, close property should be set to true in the tabbar configuration:
view: "tabview",
tabbar: {
close:true
}
To make a separate tab closable, use the close proerty in its configuration:
view: "tabview",
cells: [
{ header:"List",
close:true,
body:{...}
}
]
Related sample: Tabview: Close tab button
Tabbar default feature. If the tabs are wider than the available space, some of them are pushed to a popup list and can be reached though the related menu.
Everything is done fully automatically, though customization options for tab and popup width, icons, etc. are available through the tabbar configuration:
view: "tabview",
tabbar: {
popupWidth: 300,
tabMinWidth: 120
}
More in detail in the dedicated documentation article.
The width of each tab can be set separately:
view: "tabview",
cells:[
{ header:"List", width:150, body:{...} },
{ header:"Form", width:250, body:{...} },
]
If tabs are of different width and height, they usually take the size of the smallest tab once the user switches to it.
To avoid this behavior, you should use the fitBiggest property in the multiview configuration object:
view: "tabview",
multiview: {
fitBiggest:true
}
Related sample: Tabview: Fit Active vs Fit Biggest
The functionality is described in detail in the Adding and Deleting Multiview Cells Dynamically article.