LanternUI.Components.Segmented (LanternUI v0.8.1)

Copy Markdown View Source

Compact segmented control (All · Active · Backlog). Not tabs — there is no panel. Arrow keys move and activate the next segment.

<.segmented id="scope" value={@scope} aria-label="View">
  <:segment value="all" patch={~p"/tickets"}>All</:segment>
  <:segment value="active" patch={~p"/tickets?scope=active"}>Active</:segment>
  <:segment value="backlog" phx-click="set_scope" phx-value="backlog">Backlog</:segment>
</.segmented>

Summary

Functions

segmented(assigns)

Functions

segmented(assigns)

Attributes

  • id (:string) (required) - Stable id for the LanternSegmented hook.
  • value (:any) - Value of the active segment (atom or string). Defaults to nil.
  • size (:string) - Control density. Defaults to "sm". Must be one of "sm", or "md".
  • label (:string) - Accessible name of the group (aria-label). Prefer this over a visual legend. Defaults to nil.
  • class (:any) - Extra classes merged onto the group. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • segment (required) - One segment; link via patch/navigate/href or button via phx-click. Accepts attributes:
    • value (:any) (required)
    • patch (:string)
    • navigate (:string)
    • href (:any)
    • disabled (:boolean)
    • class (:any)
    • phx-click (:string)
    • phx-value (:string)
    • phx-target (:any)