A tabbed panel. Each panel can be targeted via a slot.
Props
active
The currently active panel. By default it will take from the passed activeParam, or the first tab.
stringor
undefined
activeParam
Reflect the active tab to a search param of name. Set to false to disable.
booleanor
string
tab
interTabIcon
Icon to be rendered between each tab.
[namespace: stringor
symbol, name: string]or
stringor
undefined
interTabIconSize
thu size of the icon to be rendered between each tab.
number
20
tabs
A list of tabs.
Tab[]
Tab
The id of the tab. Used as the slot identifier and query parameter.
Apply styling to a panel:
- 'default': Default styling.
- 'no_pad': No padding.
The title to be displayed in the tab.
Slots
Slots are created based off of the names of the passed tabs.
After all the tabs.
Events
tabChange
string
Triggered when the active tab is changed. detail is the newly active tab.
CSS Variables
The active text color of the tab, and color of the active indicator;
The color of border surrounding the tab content;
The focused text color of the tab;
The color of the focus indicator;
The inactive text color of the tab;
Parts
The active tab.
The sliding indicatior bar.
Icon between tabs (if specified).
Tab panels.
Tabs.
The tab container.