TabPanels

Alpha

View source View storybook

On this page

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

Use TabPanels for tabs with panel navigation.

Arguments

Name	Type	Default	Description
`label`	`String`	N/A	Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
`align`	`Symbol`	N/A	One of `:left` and `:right`. - Defaults to left
`body_arguments`	`Hash`	`{}`	System arguments for the body wrapper.
`wrapper_arguments`	`Hash`	`{}`	System arguments for the `TabContainer` wrapper.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`Tabs`

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

Name	Type	Default	Description
`id`	`String`	N/A	Unique ID of tab.
`selected`	`Boolean`	N/A	Whether the tab is selected.
`system_arguments`	`Hash`	N/A	System arguments

`Extra`

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

Name	Type	Default	Description
`align`	`Symbol`	N/A	One 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 %>

Edit this page on GitHub