109k
新建

切换组 (Toggle Group)

上一个下一个

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

Radix UIBase UI
Radix UI - shadcn/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)

使用 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"

自定义

一个自定义切换组示例。

使用 font-normal 设置字体粗细。

"use client"

import * as React from "react"

RTL (从右至左)

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

"use client"

import {

API 参考

查看 Radix Toggle Group 文档。