# Tabs

Accessible tabs component.

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.

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

# Config

# tabsClass

type: string

Class applied to all CTabs components.

# tabListClass

type: string

Class applied to all CTabList components.

# tabPanelsClass

type: string

Class applied to all CTabPanels components.

# tabPanelClass

type: string | function

Example with a function:

function(active) {
  return [
    'tab-panel', // Apply `tab-panel` all the time
    { 'tab-panel--active': active } // Apply `tab-panel--active` only when it’s active
  ]
}

Class applied to all CTabPanel components.

Provide a function to dynamically apply classes based on the state, in this case it should return a valid Vue “class” syntax (object, array or string), see Vue class documentation.

# tabClass

type: string | function

Example with a function:

function(active) {
  return [
    'tab', // Apply `tab-panel` all the time
    { 'tab--active': active } // Apply `tab--active` only when it’s active
  ]
}

Class applied to all CTab components.

Provide a function to dynamically apply classes based on the state, in this case it should return a valid Vue “class” syntax (object, array or string), see Vue class documentation.

# API

Name	Type	Default	Description
Props
bare	`boolean`	`false`	Disable class inheritance from the component config.
v-model	`number\|string`	`null`	Optionally bind the Tabs state with the parent component.
defaultTab	`number\|string`	`null`	The id of the Tab to display by default. This will be ignored if `v-model` is used. Defaults to the first tab.

# Examples

# Controlled

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

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?

export default {
  data() {
    return { currentTab: '2' };
  },
  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>
  `,
};

# Local styling override

Take advantage of the bare prop to disable global styling inheritance and create styling variants.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis.

export default {
  methods: {
    getTabClass(active) {
      return { 'tab-alt--active': active };
    },
  },

  template: `
    <CTabs>
      <CTabList aria-label="Example of tabs with different style">
        <CTab target="1" :classGenerator="getTabClass" class="btn tab-alt" bare>Tab 1</CTab>
        <CTab target="2" :classGenerator="getTabClass" class="btn tab-alt" bare>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.
        </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!
        </CTabPanel>
      </CTabPanels>
    </CTabs>
  `,
};

← Icon Toggle →