@spec switch_tab(String.t(), String.t() | nil, String.t() | nil) ::
  Phoenix.LiveView.JS.t()

Returns a JS command that switches tab panels.

Deactivates all sibling tabs and panels, then activates the target.

Renders an individual tab item/button.

Examples

<.tab_item target="panel-1" is_active>Home</.tab_item>

<.tab_item target="panel-2">
  <:icon><i class="fa-solid fa-gear"></i></:icon>
  Settings
</.tab_item>

Attributes

• target (:string) (required) - ID of the target tab panel.
• tabs_id (:string) - ID of the parent tabs container (for JS switching). Defaults to nil.
• is_active (:boolean) - Defaults to false.
• width (:string) - Fixed width. Defaults to nil. Must be one of nil, "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", or "10x".
• height (:string) - Fixed height. Defaults to nil. Must be one of nil, "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", or "10x".
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled"].

Slots

• icon - Icon content (rendered before text).
• inner_block (required)

Renders a tab panel (content for a single tab).

Examples

<.tab_panel id="panel-1" is_active>Content here</.tab_panel>

Attributes

• id (:string) (required)
• is_active (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a tab bar container.

Examples

<.tabs id="my-tabs">
  <.tab_item target="panel-1" is_active>Overview</.tab_item>
  <.tab_item target="panel-2">Details</.tab_item>
</.tabs>
<.tabs_content>
  <.tab_panel id="panel-1" is_active>Overview content</.tab_panel>
  <.tab_panel id="panel-2">Details content</.tab_panel>
</.tabs_content>

Attributes

• id (:string) - Defaults to nil.
• style (:string) - Tab style variant. Defaults to nil. Must be one of nil, "pills", "boxed", "border-top", or "vertical".
• is_border_top (:boolean) - Border on top instead of bottom (shorthand for style='border-top'). Defaults to false.
• size (:string) - Defaults to nil.Must be one of nil, "sm", or "lg".
• align (:string) - Defaults to nil.Must be one of nil, "centered", or "full".
• overflow (:string) - Defaults to nil.Must be one of nil, "nowrap", "scrollable", or "collapse".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a bordered tabs container wrapper.

Attributes

• is_bordered (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a tab content container.

Attributes

• id (:string) - Content container ID (use {tabs_id}-content for scoped switching). Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a vertical tabs layout wrapper.

Attributes

• is_bordered (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)