Basic Usage

Panel1

Panel2

Panel3

The content of panel 1

<script setup>
import { ref } from 'vue'
const items = [{ name: 'Panel1' }, { name: 'Panel2' }, { name: 'Panel3' }]
const activeItem = ref('Panel1')
</script>

<template>
  <c-tabs
    v-model="activeItem"
    :items="items"
  >
    <template #body-Panel1>
      The content of panel 1
    </template>
    <template #body-Panel2>
      The content of panel 2
    </template>
    <template #body-Panel3>
      The content of panel 3
    </template>
  </c-tabs>
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

xs

sm

md (default)

lg

xl

Panel1

Panel2

Panel3

The content of panel 1

<script setup>
import { ref } from 'vue'
const items = [{ name: 'Panel1' }, { name: 'Panel2' }, { name: 'Panel3' }]
const activeItem = ref('Panel1')
const size = ref('md')
</script>

<template>
  <div class="c-row c-items-center c-wrap c-gutter-md">
    <c-radio
      v-model="size"
      label="xs"
      value="xs"
      size="xs"
    />
    <c-radio
      v-model="size"
      label="sm"
      value="sm"
      size="sm"
    />
    <c-radio
      v-model="size"
      label="md (default)"
      value="md"
    />
    <c-radio
      v-model="size"
      label="lg"
      value="lg"
      size="lg"
    />
    <c-radio
      v-model="size"
      label="xl"
      value="xl"
      size="xl"
    />
  </div>
  <c-tabs
    v-model="activeItem"
    :items="items"
    :size="size"
  >
    <template #body-Panel1>
      The content of panel 1
    </template>
    <template #body-Panel2>
      The content of panel 2
    </template>
    <template #body-Panel3>
      The content of panel 3
    </template>
  </c-tabs>
</template>

Click to open/fold code

Open Vue Repl Editor

CTabs API

Props

Slots

Events

modelValue

string

*

The current active tab name. Can be used with

items

Array<CItem>

*

The items config.

size

CSize

Default  'md'

The size of tabs.

panelPadding

boolean

Default  true

Determine whether the panel has a padding or not.

bodyStyle

Record

Default  () => ({})

Customize the panel body style.