Tabs

New

Overview

Tab component that is designed to patch or navigate within or between LiveViews.

This is a page

HEEx

<Tabs.tabs id="example-tabs" label="Project information" selected={Atom.to_string(@selected_tab)}>
  <:tab
    value="overview"
    label="Overview"
    patch={@tab_path <> "?tab=overview"}
  >
    This is a page
  </:tab>
  <:tab
    value="activity"
    label="Activity"
    patch={@tab_path <> "?tab=activity"}
  >
    This is a different page
  </:tab>
  <:tab
    value="settings"
    label="Settings"
    patch={@tab_path <> "?tab=settings"}
  >
    This is a third page!
  </:tab>
</Tabs.tabs>

Add this module

terminal

mix dizzy.add tabs

Component API

Tabs.tabs

Attributes

Attributes for Tabs.tabs
Name	Type	Default	Values
`id`	`:string`	Required	—
`label`	`:string`	Required	—
`selected`	`:string`	Required	—

Slots

Slots for Tabs.tabs
Name	Required	Attributes
`tab`	Required	value, label, patch

JavaScript hook

DizzyTabs

Handles arrow keys, Home, and End, including right-to-left navigation. Activates patch links with arrow keys, Home, and End. LiveView handles navigation and the selected assign controls the active panel.

Included in the packaged Dizzy hooks. mix dizzy.add wires this hook into your LiveSocket configuration automatically.