111k
新建

Toggle Group

PreviousNext

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

Radix UIBase UI
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"

自定义

一个自定义切换组示例。

Use font-normal to set the font weight.

"use client"

import * as React from "react"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

请参见 Base UI Toggle Group 文档。