SaladUI.Tabs (SaladUI v1.0.0)

Copy Markdown View Source

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>

Component events

  • :on-tab-changed - Maps the tab-changed event. Fired when a different tab is selected.

Server commands

Tabs does not support SaladUI.LiveView.send_command/4. To change the active tab from the server, update the value assign and let LiveView re-render.

Summary

Functions

tabs(assigns)

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

tabs_content(assigns)

Content panel that corresponds to a tab trigger.

tabs_list(assigns)

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

tabs_trigger(assigns)

Individual tab button that activates its corresponding content panel.

Functions

tabs(assigns)

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

Component events

  • :on-tab-changed - Fired when a different tab is selected.

Attributes

  • id (:string) (required) - Unique identifier for the tabs component.
  • default (:string) - Default selected tab value. Defaults to nil.
  • value (:string) - Currently 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)

tabs_content(assigns)

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)

tabs_list(assigns)

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)

tabs_trigger(assigns)

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)