Tabs

Accessible tabs component.

Usage

See using components for detailed instructions.

import { CTab, CTabList, CTabPanel, CTabPanels, CTabs } from 'chusho';

Config

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

{
  components: {
    tabs: {
      class({ modelValue, defaultTab, variant }) => {},
    },
    tabList: {
      class({ variant }) => {},
    },
    tab: {
      class({ active, target, variant }) => {},
    },
    tabPanels: {
      class({ variant }) => {},
    },
    tabPanel: {
      class({ active, id, variant }) => {},
    },
  },
}

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({ active }) {
    return ['tab', {
        'tab--active': active,
    }]
}

API

Name Type Default Description

Props

variant

string|array|object

undefined

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

string|number

null

Optionally bind the Tabs state with the parent component.

defaultTab

string|number

null

The id of the Tab to display by default. This value is ignored if v-model is used and required otherwise.

Events

update:modelValue

When the selected tab change.

Argument	Type	Description
modelValue	`string\|number`	The selected tab id.

Examples

Simplest

template

<CTabs default-tab="1">
  <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">
      <p>
        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.
      </p>
    </CTabPanel>
    <CTabPanel id="2">
      <p>
        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?
      </p>
    </CTabPanel>
    <CTabPanel id="3">
      <p>
        Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae.
        Nobis natus qui voluptate inventore molestias quisquam, consequuntur
        harum?
      </p>
    </CTabPanel>
  </CTabPanels>
</CTabs>

Controlled

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

vue

<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">
        <p>
          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.
        </p>
      </CTabPanel>
      <CTabPanel id="2">
        <p>
          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?
        </p>
      </CTabPanel>
    </CTabPanels>
  </CTabs>
</template>

Tabs #

Usage #

Config #

class #

Example #

API #

Examples #

Simplest #

Controlled #