TabPanel
Widget

A tabbed container that displays a collection of child panels, each accessible via a tab bar along the top. Each tab's appearance can be customized using the tab config on the child panel. Switch tabs programmatically with activeTab and listen for changes via the tabChange event. Tab selector buttons are fully keyboard-navigable — Enter or Space activates a tab.

const tabPanel = new TabPanel({
    items : {
        general : {
            title : 'General',
            items : {
                name : { type : 'textfield', label : 'Name' }
            }
        },
        settings : {
            title : 'Settings',
            tab   : { icon : 'fa fa-cog' },
            items : {
                theme : { type : 'combo', label : 'Theme' }
            }
        }
    },
    appendTo : document.body
});

Useful configs and events

Config / Event	Description
items	Tab child panels, keyed by tab reference name
activeTab	Index or reference of the initially active tab
tabMinWidth	Minimum width for tab selector buttons
animateTabChange	Animate transitions between tabs
tabChange	Fired when the active tab changes

Adding non tab items to the tab bar

The TabBar is a subclass of the Toolbar, meaning you can add additional widgets to it. You can add either tab-specific items only shown for the active tab, or you can add static extra items that are shown for all tabs.

Demo showing tab-specific extra items using tabBarItems.

Demo showing static extra items using items

Tabs can be drag-dropped

You can easily let users reorder the tabs by setting enableReordering to true.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

activeTab : Number0

The index of the initially active tab.

Has a corresponding runtime activeTab property.
animateTabChange : Booleantrue

Specifies whether to slide tabs in and out of visibility.
autoHeight : Booleanfalse

Set the height of all tabs to match the tab with the highest content.

tabBar : TabBarConfig

Additional configuration for the tab bar.

Use this to add more non-tab items to the bar:

new TabPanel({
   tabBar : {
      items : {
         spacer : '->', // Spacer which moves next item to the right
         button : { type : 'button', text : 'MyButton' }
      }
   }
});

tabMaxWidth : Number

Max width of a tab title. 0 means no maximum width. This is default.
tabMinWidth : Number

Min width of a tab title. 0 means no minimum width. This is default.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTabPanel : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TabPanel class, or subclass thereof.

activeIndex : Number

READONLY

The active tab index. Setting must be done through activeTab
activeItem : Widget

READONLY

The active child widget. Setting must be done through activeTab
activeTab : Number/Widget

The index of the initially active tab.

Has a corresponding activeTab config.
isTabPanel : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TabPanel class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeTabChange

PREVENTABLE

The active tab is about to be changed. Return false to prevent this.
tabChange

The active tab has changed.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeTabChange

PREVENTABLE

The active tab is about to be changed. Return false to prevent this.
onTabChange

The active tab has changed.

TabPanel
Widget

Useful configs and events

Adding non tab items to the tab bar

Tabs can be drag-dropped

See also

Configs

Properties

Events

Event handlers

Source path

Inheritance tree5

Mixins7

Contents

TabPanel Widget

Useful configs and events

Adding non tab items to the tab bar

Tabs can be drag-dropped

See also

Configs

Properties

Events

Event handlers

Source path

Inheritance tree5

Mixins7

Contents

TabPanel
Widget