组件
import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleDemo() {
return (
<Toggle aria-label="Toggle italic">
<Bold className="h-4 w-4" />
</Toggle>
)
}
安装
pnpm dlx shadcn@latest add toggle
用法
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>示例
默认
import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleDemo() {
return (
<Toggle aria-label="Toggle italic">
<Bold className="h-4 w-4" />
</Toggle>
)
}
大纲
import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleOutline() {
return (
<Toggle variant="outline" aria-label="Toggle italic">
<Italic />
</Toggle>
)
}
带文本
import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleWithText() {
return (
<Toggle aria-label="Toggle italic">
<Italic />
Italic
</Toggle>
)
}
小尺寸
import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleSm() {
return (
<Toggle size="sm" aria-label="Toggle italic">
<Italic />
</Toggle>
)
}
大尺寸
import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleLg() {
return (
<Toggle size="lg" aria-label="Toggle italic">
<Italic />
</Toggle>
)
}
禁用
import { Underline } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleDisabled() {
return (
<Toggle aria-label="Toggle italic" disabled>
<Underline className="h-4 w-4" />
</Toggle>
)
}