# Tabs

Accessible tabs component.

# Config

The options below are to be set in the global configuration at the following location:

{
    components: {
        tabs: {
            // ...
        },
        tabList: {
            // ...
        },
        tab: {
            // ...
        },
        tabPanels: {
            // ...
        },
        tabPanel: {
            // ...
        },
    }
}

# CTabs, CTabList, CTab, CTabPanels and CTabPanel

# class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

type: Array<String | Object> | Object | String | (props: Object) => {}
default: null

# Example

Using the CTab component:

class({ variant, active }) {
    return ['tab', {
        'tab--active': active,
    }]
}

# API

CTabs

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.
modelValue	`SelectedItemId`	`null`	Optionally bind the Tabs state with the parent component.
defaultTab	`SelectedItemId`	`null`	The id of the Tab to display by default. This is ignored if `v-model` is used. Defaults to the first tab.
Events
update:modelValue

CTabList

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.

CTab

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.
target *	`SelectedItemId`		The id of the Tab this button should control.

CTabPanels

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.

CTabPanel

Name	Type	Default	Description
Props
variant	`string\|array`	`null`	Useful when used in the component config `class` option, to style it conditionally. See styling components.
bare	`boolean`	`false`	Disable class inheritance from the component config. See styling components.
id *	`SelectedItemId`		A unique ID to target the panel with CTab.

# Examples

# Simplest

<CTabs>
  <CTabList aria-label="Example of tabs">
    <CTab target="1">Tab 1</CTab>
    <CTab target="2">Tab 2</CTab>
    <CTab target="3">Tab 3</CTab>
  </CTabList>

  <CTabPanels>
    <CTabPanel id="1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab.
    </CTabPanel>
    <CTabPanel id="2">
      Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
    </CTabPanel>
    <CTabPanel id="3">
      Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
    </CTabPanel>
  </CTabPanels>
</CTabs>

# Controlled

Set a v-model on the CTabs component to control the active tab.

<script>
export default {
    data() {
        return { currentTab: '2' };
    },
};
</script>

<template>
    <CTabs v-model="currentTab">
        <CTabList aria-label="Example of controlled tabs">
            <CTab target="1">Tab 1</CTab>
            <CTab target="2">Tab 2</CTab>
        </CTabList>

        <CTabPanels>
            <CTabPanel id="1">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Laboriosam in, iste id nobis dolor excepturi dolore expedita
                vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid
                minima harum molestias pariatur tempora ab.
            </CTabPanel>
            <CTabPanel id="2">
                Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum
                molestias pariatur tempora ab, libero quo maiores sapiente
                doloribus nihil commodi eaque accusantium praesentium! Nobis
                natus qui voluptate inventore molestias quisquam, consequuntur
                harum?
            </CTabPanel>
        </CTabPanels>
    </CTabs>
</template>

← Picture Click Outside →