OOUI/Index and TabPanels

An   contains  s 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.

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