- 1.5.0

Tabs

Renders tab panels.

Read more Read less

This component is meant for tabs that toggle content panels within the page. If you want to link to a different view or live action, use tab_navigation/1 instead.

Maturity: Refining

Usage

<.tabs id="dog-breed-profiles" label="Dog Breed Profiles">
  <:panel label="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:panel>
  <:panel label="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:panel>
  <:panel label="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:panel>
</.tabs>

This component needs the Doggo.Tabs JavaScript hook. See Phoenix LiveView Hooks for registering it.

Keyboard

  • Left, Right, Up and Down - previous or next tab, wrapping at the ends. A tab list with orientation="horizontal" uses Left and Right, one with orientation="vertical" uses Up and Down.
  • Home and End - first and last tab.
  • Enter or Space - select the focused tab.

The tab list is a single tab stop.

Dog breed profiles

Friendly, intelligent, great with families. Origin: Scotland. Needs regular exercise.

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required id * :string
label :string

A accessibility label for the tabs. Set as aria-label attribute.

 Read more Read less

You should ensure that either the label or the labelledby attribute is set.

Do not repeat the word tab list in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels the tabs.

 Read more Read less

Example:

Dogs

You should ensure that either the label or the labelledby attribute is set.
orientation :string

Sets aria-orientation and determines whether to use the left and right

 Read more Read less
"horizontal"

arrow keys or the up and down arrow keys to move between controls.
rest :global

Any additional HTML attributes.
Required panel * :slot
Show slot attributes Hide slot attributes
Required label * :string 
<:panel label="Golden Retriever">
  <p>
    Friendly, intelligent, great with families. Origin: Scotland. Needs
    regular exercise.
  </p>
</:panel>
<:panel label="Siberian Husky">
  <p>
    Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
    Loves cold climates.
  </p>
</:panel>
<:panel label="Dachshund">
  <p>
    Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
  </p>
</:panel>