views
defines the configuration of tabs
Example
const tabbar = new dhx.Tabbar("tabbar_container", {
views:[
{ tab: "left", css:"panel flex", header:"Left"},
{ tab: "west", css:"panel flex", header:"West"},
{ tab: "east", css:"panel flex", header:"East"},
{ tab: "right", css:"panel flex", header:"Right" }
]
});
Related sample: Tabbar. Tab size
1. The views array contains a set of objects that describe configuration of tabs. Each tab object may include the following properties:
- id - the id of a tab
- tab - the name of a tab
- tabCss - the name of the CSS class used for a tab
- css - the name of the CSS class used for a cell
- header - the header of a cell
- html - HTML content for a tab
- padding - the distance between the content of a cell and the border of tabbar
- tabWidth - the width of a tab
- tabHeight - the height of a tab
2. In case you specify both the sizes for a separate tab and the sizes for all tabs, the sizes set for a separate tab are a priority. For example:
const tabbar = new dhx.Tabbar("tabbar_container",{
tabHeight: 50,
tabWidth: 80,
views:[
{ tab: "left", css:"panel flex", header:"Left", tabHeight: 45, tabWidth: 100},
// other tabs
]
});
As a result, the height of a tab is 45 and the width is 100.
3. Here are some notes on defining the sizes of a tab when the mode option is set in the configuration object of a Tabbar:
If the mode of displaying a tabbar is set to "top"|"bottom", there is no the ability to define the height for a separate tab.
By default, the width of the tabs is adjusted to their content. The default height of the tabs is 45px.If the mode of displaying a tabbar is set to "left"|"right", there is no the ability to define the width for a separate tab.
The default height of the tabs is 45px, default width is 200px.
Change log:
The tabWidth and tabHeight properties of a tab object are added in v7.0.