Salad UI

Tab

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

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the tabs component
default :string

Default selected tab value
class :string
on-tab-changed :any

Handler for tab change events
rest :global
Required inner_block * :slot 
<.tabs_list>
  <.tabs_trigger value="tab1">First Tab</.tabs_trigger>
  <.tabs_trigger value="tab2">Second Tab</.tabs_trigger>
  <.tabs_trigger value="tab3">Third Tab</.tabs_trigger>
</.tabs_list>
<.tabs_content value="tab1">
  <div class="p-4 bg-accent/10 rounded-md mt-2">
    Content for the first tab
  </div>
</.tabs_content>
<.tabs_content value="tab2">
  <div class="p-4 bg-accent/10 rounded-md mt-2">
    Content for the second tab
  </div>
</.tabs_content>
<.tabs_content value="tab3">
  <div class="p-4 bg-accent/10 rounded-md mt-2">
    Content for the third tab
  </div>
</.tabs_content>