A fully client-driven, uncontrolled tabs component.
Unlike the React/Radix original there is no server state: tabs_trigger/1
carries a Phoenix.LiveView.JS phx-click that, scoped to a shared
data-tabs-id, hides every sibling panel and shows its own, then flips
aria-selected / data-state across all triggers in the group. The initial
state is rendered statically from the required :default value: the matching
panel is shown and its trigger marked selected.
Triggers and panels are wired together by id ("#{id}-tab-#{value}" /
"#{id}-panel-#{value}") so aria-controls / aria-labelledby line up, and a
small ShadixTabs hook on the tablist provides ArrowLeft/ArrowRight roving
focus with activation on focus for keyboard a11y.
data-slots: tabs, tabs-list, tabs-trigger, tabs-content.
Summary
Functions
Returns the Phoenix.LiveView.JS command that activates the tab value in
the tabs group id: hides every sibling panel and shows the chosen one, then
resets selected/active state on all triggers before marking the chosen one.
The tabs root. :default is the value of the tab that is active on first
render; descendant triggers/contents take this :id to wire ids together.
A tab panel. :id is the tabs' id and :value ties it to its trigger. The
panel is hidden unless its :value equals :default.
The list of triggers (role="tablist"). Carries the ShadixTabs hook for
roving focus.
A single tab trigger. :id is the tabs' id and :value selects which panel
it controls. Clicking shows its panel, hides siblings, and updates selected
state across the group via a shared data-tabs-id selector.
Functions
Returns the Phoenix.LiveView.JS command that activates the tab value in
the tabs group id: hides every sibling panel and shows the chosen one, then
resets selected/active state on all triggers before marking the chosen one.
The tabs root. :default is the value of the tab that is active on first
render; descendant triggers/contents take this :id to wire ids together.
Attributes
id(:string) (required)default(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A tab panel. :id is the tabs' id and :value ties it to its trigger. The
panel is hidden unless its :value equals :default.
Attributes
id(:string) (required)value(:string) (required)default(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The list of triggers (role="tablist"). Carries the ShadixTabs hook for
roving focus.
Attributes
id(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A single tab trigger. :id is the tabs' id and :value selects which panel
it controls. Clicking shows its panel, hides siblings, and updates selected
state across the group via a shared data-tabs-id selector.
Attributes
id(:string) (required)value(:string) (required)default(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)