🌐 Nodejs.cn
新建

切换组

PreviousNext

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

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

安装

🌐 Installation

pnpm dlx shadcn@latest add toggle-group

用法

🌐 Usage

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>

示例

🌐 Examples

大纲

🌐 Outline

使用 variant="outline" 来设置大纲样式。

🌐 Use variant="outline" for an outline style.

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

export function ToggleGroupOutline() {

大小

🌐 Size

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

🌐 Use the size prop to change the size of the toggle group.

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

export function ToggleGroupSizes() {

间距

🌐 Spacing

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

🌐 Use spacing to add spacing between toggle group items.

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

export function ToggleGroupSpacing() {

垂直

🌐 Vertical

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

🌐 Use orientation="vertical" for vertical toggle groups.

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

已禁用

🌐 Disabled

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

自定义

🌐 Custom

一个自定义切换组示例。

🌐 A custom toggle group example.

Use font-normal to set the font weight.

"use client"

import * as React from "react"

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Base UI 切换组 文档。

🌐 See the Base UI Toggle Group documentation.