选项卡

一组分层的内容部分（称为选项卡面板），一次显示一个。

组件源代码 原生 API 参考

账户

在此处更改您的账户信息。完成后，点击保存。

安装 ​

bash
npx shadcn-vue@latest add tabs

用法 ​

vue
<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
</script>

<template>
  <Tabs default-value="account" class="w-[400px]">
    <TabsList>
      <TabsTrigger value="account">
        Account
      </TabsTrigger>
      <TabsTrigger value="password">
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">
      Change your password here.
    </TabsContent>
  </Tabs>
</template>

示例 ​

垂直 ​

账户

在此处更改您的账户信息。完成后，点击保存。

在 GitHub 上编辑此页面