TabSwitcher

Switch to a new tab, switch to a new life.

Example

Props

    🕹ī¸ standard props
    tabs
    Tab[]
    List of tabs to be displayed
    []
    selected
    string
    The currently selected tab
    undefined
    mandatory
    boolean
    Whether a tab must be selected at all times
    true
    class
    { container?: string, tabs?: string, selected?: string, bookmark?: string, guide?: string }
    CSS classes to customize the component
    undefined
    🎨 style props
    --tab-switcher-selected-color
    color
    Color for the selected tab
    rgb(var(--global-color-primary-400))
    --tab-switcher-guide-color
    color
    Color for the guide line below the tabs
    rgb(var(--global-color-contrast-200))
    --tab-switcher-bookmark-color
    color
    Color for the bookmark indicator
    rgb(var(--global-color-primary-400))
    --tab-switcher-gap
    size
    Gap between tabs
    1rem
    --tab-switcher-width
    size
    Width of the tab switcher container
    100%

Slots

    appendSnippet
    A snippet that is appended to the tab container

Events

    ontabClick
    Triggered when a tab is clicked
    AttributeTypeDescription
    nativeEventMouseEventThe native mouse click event
    tabTabThe clicked tab object
    ontabKeypress
    Triggered when a key is pressed while focusing on a tab
    AttributeTypeDescription
    nativeEventKeyboardEventThe native keyboard event
    tabTabThe tab that was selected via keypress