@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-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