@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