OOUI/Index and TabPanels

An IndexLayout contains TabPanelLayouts as well as an optional tab navigation that allows users to easily navigate through the tab panels and select which one to display. By default, only one tab panel is displayed at a time. When a user navigates to a new tab panel, the index layout automatically focuses on the first focusable element, unless the default setting is changed.

The following is an example of an index layout that contains two tab panels that are accessed via a tab navigation. To see this example live, please see the code-generated documentation and click "live preview." For a full list of supported methods and configuration options, please see the code-level documentation for IndexLayouts and TabPanelLayouts. There is also a different live example on the demo.

// Example of a IndexLayout that contains two TabPanelLayouts.

function TabPanelOneLayout( name, config ) {
	TabPanelOneLayout.super.call( this, name, config );
	this.$element.append( '<p>First tab panel</p>' );
}
OO.inheritClass( TabPanelOneLayout, OO.ui.TabPanelLayout );
TabPanelOneLayout.prototype.setupTabItem = function () {
	this.tabItem.setLabel( 'TabPanel 1' );
};

function TabPanelTwoLayout( name, config ) {
	TabPanelTwoLayout.super.call( this, name, config );
	this.$element.append( '<p>Second tab panel</p>' );
}
OO.inheritClass( TabPanelTwoLayout, OO.ui.TabPanelLayout );
TabPanelTwoLayout.prototype.setupTabItem = function () {
	this.tabItem.setLabel( 'TabPanel 2' );
};

var tabPanel1 = new TabPanelOneLayout( 'one' ),
	tabPanel2 = new TabPanelTwoLayout( 'two' ),
	index = new OO.ui.IndexLayout();

index.addTabPanels ( [ tabPanel1, tabPanel2 ] );
$( document.body ).append( index.$element );