Tabs

Navigate between views within a context.

Basic Tabs

Content for Tab 1. This panel is active by default.

Content for Tab 2. Click the tab to see this content.

Content for Tab 3. Use tabs to organize related content.

<div class="ui-tabs">
  <div class="ui-tabs__list" role="tablist">
    <button class="ui-tabs__tab ui-tabs__tab--active" data-ui-toggle="tab" data-ui-target="#tab1">Tab 1</button>
    <button class="ui-tabs__tab" data-ui-toggle="tab" data-ui-target="#tab2">Tab 2</button>
  </div>
  <div class="ui-tabs__content">
    <div id="tab1" class="ui-tabs__panel ui-tabs__panel--active">Content 1</div>
    <div id="tab2" class="ui-tabs__panel">Content 2</div>
  </div>
</div>

Pill Tabs

Overview content
Details content
Settings content

Events

EventDescription
ui:tabs:changeFired before tab change (cancelable)
ui:tabs:changedFired after tab changed