views

defines the configuration of tabs

array views;

Example

var 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 samples

Details

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:

var 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.

See also
Change log

tabWidth and tabHeight properties of a tab object are added in v7.0.

Back to top