切换组

一组可以切换打开或关闭的双状态按钮。

组件源代码 原生 API 参考

安装 ​

bash
npx shadcn-vue@latest add toggle-group

使用 ​

vue
<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="single">
    <ToggleGroupItem value="a">
      A
    </ToggleGroupItem>
    <ToggleGroupItem value="b">
      B
    </ToggleGroupItem>
    <ToggleGroupItem value="c">
      C
    </ToggleGroupItem>
  </ToggleGroup>
</template>

示例 ​

默认 ​

轮廓 ​

单个 ​

小型 ​

大型 ​

禁用 ​

在 GitHub 上编辑此页面