JS API
Refs
btn[]
HTMLElement references for tab button elements. Each button corresponds to a tab content panel.
content[]
HTMLElement references for tab content panels. Each panel corresponds to a tab button.
Options
styles
- Type:
object
- Default:
{ content: { closed: { position: 'absolute', opacity: '0', pointerEvents: 'none', visibility: 'hidden' } } }
Configure the styles for different tab states. Available references are btn
and content
, each supporting open
, active
, and closed
style states.
data-option-styles='{
"btn": {
"open": {"borderBottomColor": "#fff"},
"closed": {"borderBottomColor": "transparent"}
},
"content": {
"open": {"opacity": 1},
"closed": {"opacity": 0}
}
}'
Methods
enableItem(item)
- Parameters:
item
(TabItem) - The tab item to enable - Returns:
Promise<this>
Enable a specific tab item and its associated content with transition animations.
disableItem(item)
- Parameters:
item
(TabItem) - The tab item to disable - Returns:
Promise<this>
Disable a specific tab item and its associated content with transition animations.
Events
enable
Emitted when a tab is enabled. The event data contains the enabled tab item.
disable
Emitted when a tab is disabled. The event data contains the disabled tab item.
Properties
items
- Type:
TabItem[]
Array of tab items, each containing:
btn
(HTMLElement) - The tab button elementcontent
(HTMLElement) - The tab content elementisEnabled
(boolean) - Whether the tab is currently enabled
Event Handlers
onBtnClick({ index })
Internal method called when a tab button is clicked. Switches to the clicked tab and disables others.