Tab-Group

<script setup lang="ts">
// 初始化tab值
const tabValue = ref('/docs')

// tab组件
const items = [
  { label: '首页', value: '/', content: '我是首页' },
  { label: '文档', value: '/docs', content: '我是文档' },
  { label: '组件', value: '/docs/components', content: '我是组件' },
]
</script>

<template>
  <div class="h-56 flex flex-center flex-col gap-5">
    <ObTabGroup v-model="tabValue" :items />
  </div>
</template>

<script setup lang="ts">
// 初始化tab值
const tabValue = ref('/docs')

// tab组件
const items = [
  { label: '首页', value: '/' },
  { label: '文档', value: '/docs' },
  { label: '组件', value: '/docs/components' },
]
</script>

<template>
  <div class="h-auto flex flex-center flex-col gap-5 py-5">
    <ObTabGroup v-model="tabValue" :items variant="primary" />
    <ObTabGroup v-model="tabValue" :items variant="success" />
    <ObTabGroup v-model="tabValue" :items variant="danger" />
    <ObTabGroup v-model="tabValue" :items variant="warning" />
    <ObTabGroup v-model="tabValue" :items variant="info" />
  </div>
</template>

<script setup lang="ts">
// 初始化tab值
const tabValue = ref('/docs')

// tab组件
const items = [
  { label: '首页', value: '/' },
  { label: '文档', value: '/docs' },
  { label: '组件', value: '/docs/components' },
]
</script>

<template>
  <div class="h-auto flex flex-center flex-col gap-5 py-5">
    <ObTabGroup v-model="tabValue" :items size="large" />
    <ObTabGroup v-model="tabValue" :items size="middle" />
    <ObTabGroup v-model="tabValue" :items size="small" />
  </div>
</template>

<script setup lang="ts">
// 初始化tab值
const tabValue = ref('docs')

// tab组件
const items = [
  { label: 'home', value: 'home', content: 'my is home' },
  { label: 'docs', value: 'docs', content: 'my is docs' },
  { label: 'cpns', value: 'cpns', content: 'my is cpns' },
]
</script>

<template>
  <div class="h-56 flex flex-center flex-col gap-5">
    <ObTabGroup v-model="tabValue" :items>
      <!-- 规范label -->
      <template #label="{ item }">
        {{ item.label.toUpperCase() }}
      </template>

      <!-- 规范value -->
      <template #value="{ item }">
        <div class="bg-danger p-8 text-white">
          {{ item.content.toUpperCase() }}
        </div>
      </template>
    </ObTabGroup>
  </div>
</template>

<script setup lang="ts">
// 初始化tab值
const tabValue = ref('docs')

// tab组件
const items = [
  { label: '首页', value: 'home', content: '我是首页' },
  { label: '我是文档的 label', value: 'docs', content: '我是文档的 value' },
  { label: '组件', value: 'components', content: '我是组件的 value' },
]
</script>

<template>
  <div class="h-56 flex flex-center flex-col gap-5">
    <ObTabGroup v-model="tabValue" :items>
      <template #label-docs="{ item }">
        {{ item.content }}
      </template>
      <template #label-components="{ item }">
        {{ item.content }}
      </template>
      <template #value-docs="{ item }">
        {{ item.label }}
      </template>
    </ObTabGroup>
  </div>
</template>