mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-01 00:24:20 +00:00
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
|
|
|
|
import {
|
|
ToggleGroup,
|
|
ToggleGroupItem,
|
|
} from "@/registry/new-york-v4/ui/toggle-group"
|
|
|
|
export function ToggleGroupDemo() {
|
|
return (
|
|
<div className="flex flex-col items-center gap-6 md:flex-row">
|
|
<ToggleGroup type="multiple">
|
|
<ToggleGroupItem value="bold" aria-label="Toggle bold">
|
|
<BoldIcon />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Toggle italic">
|
|
<ItalicIcon />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="strikethrough"
|
|
aria-label="Toggle strikethrough"
|
|
>
|
|
<UnderlineIcon />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
variant="outline"
|
|
type="single"
|
|
defaultValue="all"
|
|
className="*:data-[slot=toggle-group-item]:w-20"
|
|
>
|
|
<ToggleGroupItem value="all" aria-label="Toggle all">
|
|
All
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="missed" aria-label="Toggle missed">
|
|
Missed
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
|
|
<ToggleGroup
|
|
variant="outline"
|
|
type="single"
|
|
size="sm"
|
|
defaultValue="last-24-hours"
|
|
className="*:data-[slot=toggle-group-item]:px-3"
|
|
>
|
|
<ToggleGroupItem
|
|
value="last-24-hours"
|
|
aria-label="Toggle last 24 hours"
|
|
>
|
|
Last 24 hours
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
|
|
Last 7 days
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
|
|
<ToggleGroup
|
|
type="single"
|
|
size="sm"
|
|
defaultValue="last-24-hours"
|
|
className="*:data-[slot=toggle-group-item]:px-3"
|
|
>
|
|
<ToggleGroupItem
|
|
value="last-24-hours"
|
|
aria-label="Toggle last 24 hours"
|
|
>
|
|
Last 24 hours
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
|
|
Last 7 days
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
)
|
|
}
|