- 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.

Default
Open in playground

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

<div style="inline-size: 100%">
  <.tabs id="tabs-single-default" 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>
</div>
Vertical
Open in playground

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

<div style="inline-size: 100%">
  <.tabs id="tabs-single-vertical" label="Dog Breed Profiles" orientation="vertical">
    <: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>
</div>
Labelledby
Open in playground

If there already is a heading for the tabs, use labelledby to reference the existing visible label instead of repeating the text in the label attribute.

Dog breed profiles

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

<div style="inline-size: 100%">
  <h3 id="dog-breed-profiles-heading" style="margin-block: 0 0.75rem">
    Dog breed profiles
  </h3>
  <.tabs id="tabs-single-labelledby" labelledby="dog-breed-profiles-heading">
    <: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>
</div>