Doggo Storybook 0.9.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.

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>

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

Attribute Type Documentation Default Value
class :any Any additional classes to be added. 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. You should ensure that either the `label` or the `labelledby` attribute is set. Do not repeat the word `tab list` or similar in the label, since it is already announced by screen readers.
labelledby :string The DOM ID of an element that labels the tabs. Example: ```html <h3 id="my-tabs-label">Dogs</h3> <Doggo.tabs labelledby="my-tabs-label"></Doggo.tabs> ``` You should ensure that either the `label` or the `labelledby` attribute is set.
rest :global Any additional HTML attributes.
Required panel * :slot 
<: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>