切换组

一组可切换开关状态的两态按钮。

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { Bold, Italic, Underline } from "lucide-react"

安装


pnpm dlx shadcn@latest add toggle-group

使用

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

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

示例

轮廓样式

使用 variant="outline" 获取轮廓样式。

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ToggleGroupOutline() {

大小

使用 size 属性更改切换组的大小。

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ToggleGroupSizes() {

间距

使用 spacing 为切换组项之间添加间距。

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ToggleGroupSpacing() {

纵向排列

使用 orientation="vertical" 创建垂直切换组。

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

禁用状态

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { Bold, Italic, Underline } from "lucide-react"

API 参考

请参阅 Radix 切换组文档。

切换按钮 Toggle 提示 Tooltip

安装使用示例轮廓样式大小间距纵向排列禁用状态 API 参考