Tabbar can take the following modifications:
Related sample: Dynamic Tabbar
Everything is done fully automatically - when window size changes, tabs are minimized and then pushed to a popup. So 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 comnpulsory include value property, otherwise it will render id on tabs and through an error. Still, there can be other properties that can be rendered in popup list with popupTemplate.
More info about Webix data templates can be found in the dedicated documentation article.
Back to top