基础使用

面板1
面板222222
面板3
面板1内容
<script setup>
import { ref } from 'vue'
const items = [
  { name: '面板1' },
  { name: '面板222222' },
  { name: '面板3' }
]
const activeItem = ref('面板1')
</script>

<template>
  <c-tabs v-model="activeItem" :items="items">
    <template #body-面板1>
      面板1内容
    </template>
    <template #body-面板222222>
      面板2内容
    </template>
    <template #body-面板3>
      面板3内容
    </template>
  </c-tabs>
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

xs
sm
md(默认)
lg
xl
面板1
面板222222
面板3
面板1内容
<script setup>
import { ref } from 'vue'
const items = [
  { name: '面板1' },
  { name: '面板222222' },
  { name: '面板3' }
]
const activeItem = ref('面板1')
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(默认)" 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-面板1>
      面板1内容
    </template>
    <template #body-面板222222>
      面板2内容
    </template>
    <template #body-面板3>
      面板3内容
    </template>
  </c-tabs>
</template>
点击展开/收起代码
点击打开交互式编辑器

CTabs API

Props
Slots
Events
modelValue
string
*

当前激活的名称,用于v-model绑定

items
Array<CItem>
*

标签项

size
CSize
默认值  'md'

尺寸

panelPadding
boolean
默认值  true

面板是否具有一个size尺寸的内边距

bodyStyle
Record
默认值  () => ({})

自定义面板体样式