UnderlinePanels

The underline panels are used to break related content into tabbed panels.

v0.23.0AlphaNot reviewed for accessibility

Description

Use UnderlinePanels to style tabs with an associated panel and an underlined selected state.

Arguments

NameDefaultDescription
label

N/A

String

Sets an aria-label that helps assistive technology users understand the purpose of the tabs.

align

:left

Symbol

One of :left or :right. - Defaults to left

body_arguments

{}

Hash

System arguments for the body wrapper.

wrapper_arguments

{}

Hash

System arguments for the TabContainer wrapper.

system_arguments

N/A

Hash

Examples

Slots

tabs

Use to render a button and an associated panel slot. See the example below or refer to Primer::Alpha::Navigation::Tab.

NameDefaultDescription
id

N/A

String

Unique ID of tab.

selected

N/A

Boolean

Whether the tab is selected.

system_arguments

N/A

Hash

actions

Use actions for a call to action.

NameDefaultDescription
tag

:div

Symbol

One of :div or :span.

system_arguments

N/A

Hash