组件
import { Toggle } from "@/components/ui/toggle"
import { BookmarkIcon } from "lucide-react"
安装
🌐 Installation
pnpm dlx shadcn@latest add toggle
用法
🌐 Usage
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>示例
🌐 Examples
大纲
🌐 Outline
使用 variant="outline" 来设置大纲样式。
🌐 Use variant="outline" for an outline style.
import { Toggle } from "@/components/ui/toggle"
import { BoldIcon, ItalicIcon } from "lucide-react"
带有文本
🌐 With Text
import { Toggle } from "@/components/ui/toggle"
import { ItalicIcon } from "lucide-react"
大小
🌐 Size
使用 size 属性来更改切换开关的大小。
🌐 Use the size prop to change the size of the toggle.
import { Toggle } from "@/components/ui/toggle"
export function ToggleSizes() {已禁用
🌐 Disabled
import { Toggle } from "@/components/ui/toggle"
export function ToggleDisabled() {从右到左
🌐 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
请参阅 Radix Toggle 文档。
🌐 See the Radix Toggle documentation.