Skip to main content

views

defines the configuration of tabs

views?: ICellConfig[];

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.