Tabs Layout

layout:{
    type: 'tab' // or tabs
}

Demo

SAMPLE
CODE

In the Tab Layout, only one child view is visible at a time. You navigate between child views by clicking on tabs, or by calling the child views show method.

Tabs can be rendered at top, left, right and bottom. Default position is left. Your can specify where to render the tabs using the tabs property on the layout object.

tabs:'top|bottom|left|right'

Default tab position is top

Below, you will see examples of tabs positioned to the left, right and bottom.

tabs:'bottom'

SAMPLE
CODE

tabs:'left'

SAMPLE
CODE

tabs:'right'

SAMPLE
CODE

Tab title

The title of the tab is set using the title attribute on each children.

{
    title:'TimePicker tab',
    type:'calendar.TimePicker'
}

Overflow

When tabs are rendered at the top or bottom, and you don't have enough space for all the tabs, you will see a button to the right which will show a menu with missing tabs.

You can see an example of this below:

SAMPLE
CODE

Add children at runtime

When child views are added during runtime, the tab view will be automatically updated.

The example below adds a new child view to the tab layout above:

SAMPLE
CODE

Remove child views

Generated 2016-12-21 21:38:21