TabComponent | Your awesome title

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

This component is part of navigation components such as Ariadne::TabContainerComponent. and Ariadne::TabNavComponent and should not be used by itself.

Accessibility

TabComponent renders the selected anchor tab with aria-current="page" by default. When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current=”true”

Arguments

Name	Type	Default	Description
`id`	`String`	`nil`	The unique ID of the tab.
`selected`	`Boolean`	`false`	Whether the tab is selected or not.
`with_panel`	`Boolean`	`false`	Whether the Tab has an associated panel.
`href`	`String`	`nil`	The link to navigate to when the tab is clicked.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Panel`

Panel controlled by the Tab. This will not render anything in the tab itself. It will provide a accessor for the Tab’s parent to call and render the panel content in the appropriate place.

Name	Type	Default	Description
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Classes and attributes

`Text`

The tab’s text.

Name	Type	Default	Description
`kwargs`	`Hash`	N/A	The same arguments as Text.

Examples

Default

<%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
  <% tab.text { "Public comment" } %>
  <% tab.panel { "Public comment panel" } %>
<% end %>