120k
New

切换组

PreviousNext

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

Base UIReact AriaRadix UI
import { Bold, Italic, Underline } from "lucide-react"

import {

安装

pnpm dlx shadcn@latest add toggle-group

用法

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
<ToggleGroup selectionMode="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

组合

使用以下组合构建一个 ToggleGroup：

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

概述

使用 variant="outline" 设置轮廓样式。

import {
  ToggleGroup,
  ToggleGroupItem,

尺寸

使用 size 属性更改切换组的尺寸。

import {
  ToggleGroup,
  ToggleGroupItem,

间距

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

import {
  ToggleGroup,
  ToggleGroupItem,

垂直

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

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import {

已禁用

import { Bold, Italic, Underline } from "lucide-react"

import {

自定义

自定义切换组示例。

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 参考

请参阅 React Aria ToggleButtonGroup 文档。