Tabbar can take the following modifications:
Related sample: Dynamic Tabbar in Multiview
Everything is done fully automatically: when the size of a window changes, tabs are minimized and then pushed to a popup. So the following code is enough:
Default tabbar
{ view:"tabbar", options:["First tab", "Second Tab"] }
Customized tabbar
{
view:"tabbar",
tabMinWidth:150,
tabMoreWidth:80,
moreTemplate:"Show more",
//or moreTemplate:function(){ return "Show more" },
popupWidth:250,
popupTemplate:"#text#",
yCount:10,
options:[
{id:1, value:"First Tab", text:"Some text for first tab"},
{id:2, value:"Second Tab", text:"Some text for second tab"}
...
]
}
Note that options config for tabbar must include the value property, otherwise it will render id on tabs and throw an error. Still, there can be other properties rendered in a popup list with popupTemplate.
More info about Webix data templates can be found in the dedicated documentation article.
Back to top