@cas-smartdesign/tab-bar
A TabBar element with SmartDesign look & feel
The sd-tab-bar element should contain only sd-tab elements as distributed children via a slot element because the internal logic is based on that type.
Attributes
Note that all the following attributes are reflected to properties as well.
-
no-bar:
_boolean (default:false)_
- Hides the slider if true
-
no-slide:
_boolean (default:false)_
- Disables the sliding animation if true
-
vertical:
_boolean (default:false)_
- Enables vertical layout if present
-
show-counter:
_boolean (default:false)_
- "Counter" elements are rendered at the left side of the tab elements if set
Tab attributes
-
text:
_string (default:null)_
- The text shown in the tab content
-
anchors:
_string[] (default:null)_
- The anchors shown in a dropdown list
-
index:
_number (default:null)_
- The index of the tab element
-
selected:
_boolean (default:false)_
- True/present if the tab is selected, it is managed by the tab-bar
Properties
-
selectedIndex: number
- Defines the index of the currently selected tab element
-
focusedIndex: number
- Defines the index of the currently focused tab element
-
tabElements: Tab[]
- Contains the tab elements attached to the tab-bar
Tab properties
-
noInk:
_boolean (default:false)_
- Disables ripple effect on tab elements if true
CSS Custom Properties
-
--sd-tab-bar-color
- The color of the slider and content of the individual tab elements
-
--sd-tab-bar-hover-color
- The color used as a background for tab element hovering effect
-
--sd-tab-bar-padding
- The paddings inside the tab elements
-
--sd-tab-bar-slide-duration
- The duration of the slider animation
-
--sd-tab-bar-counter-color
-
--sd-tab-bar-counter-background-color
- The text & background colors of the counter element
-
--sd-tab-bar-selected-counter-color
-
--sd-tab-bar-selected-counter-background-color
- The text & background colors of the counter element when the tab element is selected
Events
-
selection
- Dispatched when a tab is selected. Contains the selected index, the selected tab element and may also contain a selected anchor if the tab has anchors in it