TabContainer

Use tab container to create tabbed content with keyboard support.

Alpha
Not reviewed for accessibility

Source

On this page

This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use TabContainer to create tabbed content with keyboard support. This component does not add any styles. It only provides the tab functionality. If you want styled Tabs you can look at TabNav.

This component requires javascript.

Arguments

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

Examples

Default

Panel 1

<%= render(Primer::Alpha::TabContainer.new)  do %>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab" tabindex="-1">Tab two</button>
    <button type="button" role="tab" tabindex="-1">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
<% end %>

Edit this page on GitHub