组件
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup variant="outline" type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
安装
pnpm dlx shadcn@latest add toggle-group
用法
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>示例
默认
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup variant="outline" type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
大纲
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup type="multiple" variant="outline">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
单选
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup type="single">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
小尺寸
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup type="single" size="sm">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
大尺寸
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup type="multiple" size="lg">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
禁用
import { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup type="multiple" disabled>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}