TabContainerComponent | Your awesome title

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’ import RequiresJSFlash from ‘../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash’

A container for a row of tags. Keyboard support is provided. attribute, which will be used to label the tabs for screen readers.

Accessibility

This component requires you to pass in a sr_label

Arguments

Name	Type	Default	Description
`sr_label`	`String`	N/A	Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Tabs`

Tabs and panels to be rendered.

Name	Type	Default	Description
`id`	`String`	N/A	The unique ID of the tab.
`selected`	`Boolean`	N/A	Whether the tab is selected.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Classes and attributes

Examples

Default

<%= render(Ariadne::TabContainerComponent.new(sr_label: "Comments")) do |tab_container| %>
  <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
    <% tab.text { "Tab 1" } %>
    <% tab.panel { "Panel 1" } %>
  <% end %>
  <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
    <% tab.text { "Tab 2" } %>
    <% tab.panel { "Panel 2" } %>
  <% end %>
<% end %>