109k
新建

切换

上一页下一页

一种可在开启和关闭两种状态间切换的按钮。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import { Toggle } from "@/components/ui/toggle"
import { BookmarkIcon } from "lucide-react"

安装

pnpm dlx shadcn@latest add toggle

用法

import { Toggle } from "@/components/ui/toggle"
<Toggle>Toggle</Toggle>

示例

大纲

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

import { Toggle } from "@/components/ui/toggle"
import { BoldIcon, ItalicIcon } from "lucide-react"

带文本

import { Toggle } from "@/components/ui/toggle"
import { ItalicIcon } from "lucide-react"

尺寸 (Size)

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

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {

禁用

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {

RTL (从右至左)

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

"use client"

import * as React from "react"

API 参考

请参阅 Radix Toggle 文档。