DevactionUI.Tabs (devaction_ui v0.4.0)

Copy Markdown View Source

Tabs that switch panels without a round trip: variant: :boxed is the pill group, :line the underlined row. A small hook moves the selection with ← → Home End (roving tabindex, aria-selected) and shows the panel of the selected tab. With orientation: :vertical the tabs are a column beside the panels, the list says aria-orientation="vertical" and the keys are ↑ ↓ Home End. Each tab may carry a count, in a count_tone if it should stand out.

The first tab is selected unless one says selected. What the person picks in the browser survives the server re-rendering the tabs; when the server changes which tab says selected, that one wins. The dark theme uses the same tokens as the light one: the track is wrap, the selected tab is card.

Summary

Functions

tabs(assigns)

Tabs that switch their panels in the browser.

Functions

tabs(assigns)

@spec tabs(map()) :: Phoenix.LiveView.Rendered.t()

Tabs that switch their panels in the browser.

Attributes

  • id (:string) (required)
  • variant (:atom) - Defaults to :boxed. Must be one of :boxed, or :line.
  • label (:string) (required) - the name of the tab list, for assistive technology.
  • orientation (:atom) - :vertical puts the tabs in a column beside the panels. Defaults to :horizontal. Must be one of :horizontal, or :vertical.
  • full (:boolean) - the tab list takes the whole width and the tabs share it. Defaults to false.
  • size (:atom) - :sm is the 14px tab of a page inside an app, 40px high; it only changes the :line variant. Defaults to :md. Must be one of :md, or :sm.
  • counts (:atom) - :chip draws the count of a tab in a small bordered box instead of plain mono text. Defaults to :plain. Must be one of :plain, or :chip.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - the icon of a tab, 16px; gets %{id: tab id}.
  • tab (required) - one tab; its content is the panel, and a tab with none has an empty panel. Accepts attributes:
    • id (:string) (required) - names the tab and its panel; unique in the tabs.
    • label (:string) (required)
    • count (:any) - a number beside the label.
    • count_tone (:atom) - the tone of the count: risk, warn, ok, info or neutral.
    • selected (:boolean) - open on first render, and whenever the server changes it.