LanternUI.Components.Tabs (LanternUI v0.8.2)

Tabs — segmented tab list + panels. Mirrors Fluxon's tabs/tabs_list/ tabs_panel surface, server-driven: the active tab is an assign, tabs emit phx-click (or patch/navigate) and panels render with active.

<.tabs id="orders-tabs">
  <.tabs_list active_tab={@tab}>
    <:tab name="all" phx-click="set_tab" phx-value-tab="all">
      All <.badge size="sm">{@counts.all}</.badge>
    </:tab>
    <:tab name="pending" phx-click="set_tab" phx-value-tab="pending">Pending</:tab>
  </.tabs_list>
  <.tabs_panel name="all" active={@tab == "all"}>…</.tabs_panel>
  <.tabs_panel name="pending" active={@tab == "pending"}>…</.tabs_panel>
</.tabs>

<.tabs_list id="scope" variant="segmented" size="sm" active_tab={@scope} aria-label="View">
  <:tab name="all" patch={~p"/tickets"}>All</:tab>
  <:tab name="active" patch={~p"/tickets?scope=active"}>Active</:tab>
</.tabs_list>

Tabs given patch/navigate/href render as links — the pattern data_table uses so tab state lives in the URL. A tabs_list with an id mounts LanternTabs for arrow-key activation. Pass role="radiogroup" when the list is a standalone control with no panels.

Summary

Functions

tabs(assigns)

tabs_list(assigns)

tabs_panel(assigns)

Functions

tabs(assigns)

Attributes

id (:string) - Element id for the tabs root. Defaults to nil.
class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - tabs_list and tabs_panel children.

tabs_list(assigns)

Attributes

id (:string) - Stable id; required to mount LanternTabs for arrow-key activation. Defaults to nil.
active_tab (:string) - Name of the currently selected tab. Defaults to nil.
variant (:string) - segmented is pill-style; underline is text tabs. Defaults to "segmented". Must be one of "segmented", or "underline".
size (:string) - Tab control density. Defaults to "md". Must be one of "sm", or "md".
class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

tab (required) - One tab trigger; link via patch/navigate/href or button via phx-click. Accepts attributes:
- name (:string) - Stable tab key; matched against active_tab.
- patch (:string) - LiveView patch URL; renders the tab as a link.
- navigate (:string) - LiveView navigate URL; renders the tab as a link.
- href (:any) - External/full-page href; renders the tab as a link.
- disabled (:boolean) - Disable this trigger.
- class (:any) - Extra classes on this tab trigger.
- phx-click (:string) - LiveView click event when not using patch/navigate.
- phx-value-tab (:string) - phx-value-tab payload; defaults to name.
- phx-value-segment (:string) - Legacy segmented alias payload; sent as params["segment"].
- phx-target (:any) - LiveView target for the click event.
inner_block - Optional extra content inside the tab list.

tabs_panel(assigns)

Attributes

name (:string) (required) - Tab key this panel belongs to.
active (:boolean) - When true, the panel is rendered. Defaults to false.
class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - Panel body content.