Tabs are used for alternating between views within the same context, not to navigate to different areas. For navigation refer to the horizontal navigation guidelines.
|Included in AUI core?||Yes. You do not need to explicitly require the web resource key.|
|Web resource key:||
|AMD Module key:||N/A|
|#||First name||Last name||Username|
AUI Tabs core API is HTML and has three key parts:
|Class||Applies to element||Effect|
||.aui-tabs||Sets the tab set to display as horizontal tabs (triggers across the top)|
||.aui-tabs||Sets the tab set to display as vertical tabs (triggers on the left)|
Disables the tab set, so the triggers behave as links. Sometimes referred to as "page tabs" as the design looks like tabs, but each "tab" behaves like a standard HTML page (loads via a separate URL).
Note this will stop the tab links having tab events bound during load. Applying the class after the page has loaded has no effect.
||one instance of .menu-item per tab set||Sets the active tab trigger on initial page load.|
||one instance of .tabs-pane per tab set||Sets the active tab pane on initial page load.|
|HTML Attributes||Applies to element||Effect||Example|
||.aui-tabs||Sets whether tab state is persistent. If this attribute is defined, tab selection is persisted in the user's browser using HTML5 local storage. If this attribute is defined, the tab group
and each tab must have an id attribute defined. The value for the data-aui-persist attribute can be one of:
||.aui-tabs.horizontal-tabs||Makes the set of tabs responsive to the size of the container. This means that instead of wrapping the overflowing tabs will be placed into a dropdown.
The presence of the attribute is enough to enable the option however you can also explicitly pass in
Programmatically changes the active tab.
||This function is run when AJS.tabs is first loaded; it sets up events etc. You will need to run this again if you add new tab sets after page load.|
AJS.tabs only emits one event:
tabSelect. When a tab is selected, it fires
tabSelect which includes a reference to an object containing both the pane and the tab selected.