- 1.5.0

Tab

Application preferences
Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

Additional CSS classes
header_class :any

CSS classes for tab header
orientation :string

Tab orientation
"horizontal"
active_tab_index :integer

Index of active tab (when not using named tabs)
0
active_tab_name :string

Name of active tab (for named tab matching)
""
variant :string

Tab style variant
size :string

Tab size
content_class :any

CSS classes for tab content
rest :global
tab :slot

Tab button
Show slot attributes Hide slot attributes
id :any

tab button HTML id
class :any

tab button CSS classes
name :string

Tab name for matching with tab_content
phx_click :any

Phoenix click event

 
<:tab name="Profile">Profile</:tab>
<:tab name="Settings">Settings</:tab>
<:tab name="Notifications">Notifications</:tab>
tab_content :slot

Tab content panel
Show slot attributes Hide slot attributes
id :any

tab content panel HTML id
class :any

tab content panel CSS classes
name :string

Content name for matching with tab

 
<:tab_content name="Profile">Manage your profile information</:tab_content>
<:tab_content name="Settings">Application preferences</:tab_content>
<:tab_content name="Notifications">Notification settings</:tab_content>