Banquette
On this page

Tabs

Tabs allow you to divide your content into separate panels.

Basic

Here is the most basic usage of bt-tabs:

    Layout

    You can select the layout direction using the direction prop:

      Title slot

      For more complex title, you can use the title slot:

        Props

        Method Description Default
        direction
        		Type of positioning. top
        preRender
        		If true the content of non-focused tabs is only hidden visually.
        If false, the content of non-focused tabs is destroyed when the tab is not focused.        		 true
        focused

        v-model        		 Bidirectional binding holding the id of the tab currently focused.
        If not defined, the first tab is focused at first, then the one the user selects using the toggles.        		 null

        Slots

        Name Description
        default

        Where tabs should be defined.

        Example:

        <bt-tabs>
    <bt-tab title="First">Tab 1</bt-tab>
    <bt-tab title="Second">Tab 2</bt-tab>
</bt-tabs>

        Props: none

        Theming

        Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

        Variables

        Variable Default Comment
        togglesFontFamily var(--bt-font-family-base) -
        togglesFontSize var(--bt-font-size-sm) -
        togglesFontWeight var(--bt-font-weight-medium) -
        togglesTextColor var(--bt-text-color-base) -
        togglesTextFocusColor var(--bt-color-primary) -
        togglesTextHoverColor var(--bt-color-primary) -
        togglesBackgroundColor transparent -
        togglesBorderWidth 2px -
        togglesBorderStyle solid -
        togglesBorderColor var(--bt-color-gray-100) -
        togglesPadding 0 1em -
        focusIndicatorColor var(--tabs-toggles-text-focus-color) -
        focusTransitionDuration 0.3s -
        contentBackground none -
        contentPadding 1em -

        Selectors

        Name Comment Pseudo classes Attributes Combinable with
        root The root container.
        -
        -
        		 -
        togglesWrapper The full width container the toggles.
        -
        -
        		 -
        togglesWrapperLeft Same as togglesWrapper but restricted to the left layout.
        -
        -
        		 -
        togglesWrapperRight Same as togglesWrapper but restricted to the right layout.
        -
        -
        		 -
        toggles The inline container of the toggles.
        -
        -
        		 -
        toggle The individual container of each toggle.
        		togglesWrapperLeft, togglesWrapperRight
        toggleFocused The focused toggle.
        -
        -
        		 togglesWrapperLeft, togglesWrapperRight
        toggleIcon Targets svg icons inside the toggles.
        -
        -
        		 togglesWrapperLeft, togglesWrapperRight
        content The container holding the content of the current tab.
        -
        -
        		 -
        focusIndicator The little line that goes below the toggle of the current tab.
        -
        -
        		 -

        Examples:

        cssSelectors: {
    togglesWrapper: {
        background: '...'
    },
    'togglesWrapperLeft, togglesWrapperRight': {
        background: '...'
    },
    'toggle:hover': {
        color: '...'
    },
    'togglesWrapperLeft toggle:hover': {
        background: '...'
    }
}