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