OOUI/Index and TabPanels

From MediaWiki.org
Jump to navigation Jump to search

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. For a full list of supported methods and configuration options, please see the code-level documentation for IndexLayouts and TabPanelLayouts.

TabPanelLayout example - OOjs UI Demos 2017-05-17.png

// 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 One' );
};

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 Two' );
};

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

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