切换组

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

Component Source API Reference

安装 ​

pnpm dlx 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>

示例 ​

默认样式 ​

轮廓样式 ​

单选模式 ​

小尺寸 ​

大尺寸 ​

禁用状态 ​

Edit this page on GitHub