Doggo Storybook 0.9.0

Tab Navigation

Renders navigation tabs.

Read more Read less

This component is meant for tabs that link to a different view or live action, each with a distinct URL. If you want to render tabs that switch between in-page content panels, use tabs/1 instead.

Usage

<.tab_navigation current_value={@live_action}>
  <:item
    patch={~p"/pets/#{@pet}"}
    value={[:show, :edit]}
  >
    Profile
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/appointments"}
    value={:appointments}
  >
    Appointments
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/messages"}
    value={:messages}
  >
    Messages
  </:item>
</.tab_navigation>

Current Item

Each item has a value attribute that can be either a single value or a list of values. If you patch between live actions using this component, you would set the value to the list of live actions for which this tab is active.

The root element itself has a current_value attribute. To determine whether a tab item is active, the current value is compared with the value of the tab item. If the value is a list, the tab item is considered active if the current value is contained in that list.

Tab items are marked active by setting aria-current="page". You can select the item in CSS with .tab-navigation a[aria-current].

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 current_value * :any The current value used to compare the item values with. If you use this component to patch between different view actions, this should be the `@live_action` attribute.
label :string Aria label for the `<nav>` element. The label is especially important if you have multiple `<nav>` elements on the same page, since it allows users to differentiate between different navigation sections. If the page is localized, ensure that the label is translated. Avoid using the word "navigation" in the label, since screen readers will already announce the "navigation" role. Additionally, the label should begin with a capital letter to ensure the correct inflection when read by screen readers. "Tabs"
rest :global Any additional HTML attributes.
Required item * :slot 
<:item patch="/owners" value={:owners}>Owners</:item>
<:item patch="/pets" value={:pets}>Pets</:item>
<:item patch="/appointments" value={:appointments}>Appointments</:item>