View Source SaladUI.Tabs (SaladUI v1.0.0-beta.3)
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 tonil
.class
(:string
) - Defaults tonil
.on-tab-changed
(:any
) - Handler for tab change events. Defaults tonil
.- 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 tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Container for tab triggers that provides proper styling and ARIA attributes.
Attributes
class
(:string
) - Defaults tonil
.- 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 tonil
.disabled
(:boolean
) - Defaults tofalse
.- Global attributes are accepted.
Slots
inner_block
(required)