View Source SaladUI.Tabs (SaladUI v1.0.0-beta.1)

Implementation of tabs components from https://ui.shadcn.com/docs/components/tabs

Example:

<.tabs id="settings" default="account" on_tab_changed={JS.push("tab_changed")}>
  <.tabs_list>
    <.tabs_trigger value="account">Account</.tabs_trigger>
    <.tabs_trigger value="password">Password</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="account">
    <.card>
      <.card_content class="p-6">
        Account settings go here
      </.card_content>
    </.card>
  </.tabs_content>
  <.tabs_content value="password">
    <.card>
      <.card_content class="p-6">
        Password settings go here
      </.card_content>
    </.card>
  </.tabs_content>
</.tabs>

Summary

Functions

Primary tabs component that serves as a container for tab triggers and content.

Content panel that corresponds to a tab trigger.

Container for tab triggers that provides proper styling and ARIA attributes.

Individual tab button that activates its corresponding content panel.

Functions

Primary tabs component that serves as a container for tab triggers and content.

Attributes

  • id (:string) (required) - Unique identifier for the tabs component.
  • default (:string) - Default selected tab value. Defaults to nil.
  • class (:string) - Defaults to nil.
  • on-tab-changed (:any) - Handler for tab change events. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Content panel that corresponds to a tab trigger.

Attributes

  • value (:string) (required) - Value that matches a tab trigger.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Container for tab triggers that provides proper styling and ARIA attributes.

Attributes

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

Slots

  • inner_block (required)

Individual tab button that activates its corresponding content panel.

Attributes

  • value (:string) (required) - Unique value that identifies this tab.
  • class (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)