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

Use TabPanels for tabs with panel navigation.

Arguments

NameTypeDefaultDescription
labelStringN/ASets an aria-label that helps assistive technology users understand the purpose of the tabs.
alignSymbolN/AOne of :left and :right. - Defaults to left
body_argumentsHash{}System arguments for the body wrapper.
wrapper_argumentsHash{}System arguments for the TabContainer wrapper.
system_argumentsHashN/ASystem arguments

Slots

Tabs

Tabs to be rendered. For more information, refer to NavigationTab.

NameTypeDefaultDescription
idStringN/AUnique ID of tab.
selectedBooleanN/AWhether the tab is selected.
system_argumentsHashN/ASystem arguments

Extra

Renders extra content to the TabPanels. This will be rendered after the tabs.

NameTypeDefaultDescription
alignSymbolN/AOne of :left and :right.

Examples

Default

Panel 1
<%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
<% component.tab(id: "tab-1", selected: true) do |t| %>
<% t.text { "Tab 1" } %>
<% t.panel do %>
Panel 1
<% end %>
<% end %>
<% component.tab(id: "tab-2") do |t| %>
<% t.text { "Tab 2" } %>
<% t.panel do %>
Panel 2
<% end %>
<% end %>
<% end %>