mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-28 23:24:13 +00:00
137b1c12b7
* feat: add phosphor icons to base ui * feat_ add phosphor to blocks * feat: add phosphor to radix blocks * feat: add phosphor to radix ui * feat: add phosphor to radix example * feat: add missing phosphor icons * fix: rename broken icons * chore: format files * fix: add missing phosphor icons * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>
1066 lines
36 KiB
TypeScript
1066 lines
36 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/registry/bases/base/ui/avatar"
|
|
import { Button } from "@/registry/bases/base/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/registry/bases/base/ui/dialog"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuPortal,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/bases/base/ui/dropdown-menu"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function DropdownMenuExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<DropdownMenuBasic />
|
|
<DropdownMenuComplex />
|
|
<DropdownMenuWithIcons />
|
|
<DropdownMenuWithShortcuts />
|
|
<DropdownMenuWithSubmenu />
|
|
<DropdownMenuWithCheckboxes />
|
|
<DropdownMenuWithCheckboxesIcons />
|
|
<DropdownMenuWithRadio />
|
|
<DropdownMenuWithRadioIcons />
|
|
<DropdownMenuWithDestructive />
|
|
<DropdownMenuWithAvatar />
|
|
<DropdownMenuInDialog />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Open
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuItem>Profile</DropdownMenuItem>
|
|
<DropdownMenuItem>Billing</DropdownMenuItem>
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
|
<DropdownMenuItem>Support</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>API</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Open
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="UserIcon"
|
|
tabler="IconUser"
|
|
hugeicons="UserIcon"
|
|
phosphor="UserIcon"
|
|
/>
|
|
Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="SettingsIcon"
|
|
tabler="IconSettings"
|
|
hugeicons="SettingsIcon"
|
|
phosphor="GearIcon"
|
|
/>
|
|
Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
/>
|
|
Log out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithShortcuts() {
|
|
return (
|
|
<Example title="With Shortcuts">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Open
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Billing
|
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Settings
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Keyboard shortcuts
|
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
Log out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithSubmenu() {
|
|
return (
|
|
<Example title="With Submenu">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Open
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Email</DropdownMenuItem>
|
|
<DropdownMenuItem>Message</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>More...</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem>
|
|
New Team
|
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithCheckboxes() {
|
|
const [showStatusBar, setShowStatusBar] = React.useState(true)
|
|
const [showActivityBar, setShowActivityBar] = React.useState(false)
|
|
const [showPanel, setShowPanel] = React.useState(false)
|
|
|
|
return (
|
|
<Example title="With Checkboxes">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Checkboxes
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="min-w-40">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showStatusBar}
|
|
onCheckedChange={setShowStatusBar}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="LayoutIcon"
|
|
tabler="IconLayout"
|
|
hugeicons="LayoutIcon"
|
|
phosphor="LayoutIcon"
|
|
/>
|
|
Status Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showActivityBar}
|
|
onCheckedChange={setShowActivityBar}
|
|
disabled
|
|
>
|
|
<IconPlaceholder
|
|
lucide="ActivityIcon"
|
|
tabler="IconActivity"
|
|
hugeicons="ActivityIcon"
|
|
phosphor="ActivityIcon"
|
|
/>
|
|
Activity Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showPanel}
|
|
onCheckedChange={setShowPanel}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="PanelLeftIcon"
|
|
tabler="IconLayoutSidebar"
|
|
hugeicons="LayoutLeftIcon"
|
|
phosphor="SidebarIcon"
|
|
/>
|
|
Panel
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithRadio() {
|
|
const [position, setPosition] = React.useState("bottom")
|
|
|
|
return (
|
|
<Example title="With Radio Group">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Radio Group
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup
|
|
value={position}
|
|
onValueChange={setPosition}
|
|
>
|
|
<DropdownMenuRadioItem value="top">
|
|
<IconPlaceholder
|
|
lucide="ArrowUpIcon"
|
|
tabler="IconArrowUp"
|
|
hugeicons="ArrowUp01Icon"
|
|
phosphor="ArrowUpIcon"
|
|
/>
|
|
Top
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bottom">
|
|
<IconPlaceholder
|
|
lucide="ArrowDownIcon"
|
|
tabler="IconArrowDown"
|
|
hugeicons="ArrowDown01Icon"
|
|
phosphor="ArrowDownIcon"
|
|
/>
|
|
Bottom
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="right" disabled>
|
|
<IconPlaceholder
|
|
lucide="ArrowRightIcon"
|
|
tabler="IconArrowRight"
|
|
hugeicons="ArrowRight01Icon"
|
|
phosphor="ArrowRightIcon"
|
|
/>
|
|
Right
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithCheckboxesIcons() {
|
|
const [notifications, setNotifications] = React.useState({
|
|
email: true,
|
|
sms: false,
|
|
push: true,
|
|
})
|
|
|
|
return (
|
|
<Example title="Checkboxes with Icons">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Notifications
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="min-w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.email}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({ ...notifications, email: checked === true })
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="MailIcon"
|
|
tabler="IconMail"
|
|
hugeicons="MailIcon"
|
|
phosphor="EnvelopeIcon"
|
|
/>
|
|
Email notifications
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.sms}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({ ...notifications, sms: checked === true })
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="MessageSquareIcon"
|
|
tabler="IconMessage"
|
|
hugeicons="MessageIcon"
|
|
phosphor="ChatCircleIcon"
|
|
/>
|
|
SMS notifications
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.push}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({ ...notifications, push: checked === true })
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="NotificationIcon"
|
|
phosphor="BellIcon"
|
|
/>
|
|
Push notifications
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithRadioIcons() {
|
|
const [paymentMethod, setPaymentMethod] = React.useState("card")
|
|
|
|
return (
|
|
<Example title="Radio with Icons">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Payment Method
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="min-w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup
|
|
value={paymentMethod}
|
|
onValueChange={setPaymentMethod}
|
|
>
|
|
<DropdownMenuRadioItem value="card">
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
/>
|
|
Credit Card
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="paypal">
|
|
<IconPlaceholder
|
|
lucide="WalletIcon"
|
|
tabler="IconWallet"
|
|
hugeicons="WalletIcon"
|
|
phosphor="WalletIcon"
|
|
/>
|
|
PayPal
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bank">
|
|
<IconPlaceholder
|
|
lucide="Building2Icon"
|
|
tabler="IconBuildingBank"
|
|
hugeicons="BankIcon"
|
|
phosphor="BankIcon"
|
|
/>
|
|
Bank Transfer
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithDestructive() {
|
|
return (
|
|
<Example title="With Destructive Items">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Actions
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="PencilIcon"
|
|
tabler="IconPencil"
|
|
hugeicons="EditIcon"
|
|
phosphor="PencilIcon"
|
|
/>
|
|
Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ShareIcon"
|
|
tabler="IconShare"
|
|
hugeicons="ShareIcon"
|
|
phosphor="ShareIcon"
|
|
/>
|
|
Share
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ArchiveIcon"
|
|
tabler="IconArchive"
|
|
hugeicons="Archive02Icon"
|
|
phosphor="ArchiveIcon"
|
|
/>
|
|
Archive
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
/>
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithAvatar() {
|
|
const menuContent = (
|
|
<>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BadgeCheckIcon"
|
|
tabler="IconRosetteDiscountCheck"
|
|
hugeicons="CheckmarkBadgeIcon"
|
|
phosphor="CheckCircleIcon"
|
|
/>
|
|
Account
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="NotificationIcon"
|
|
phosphor="BellIcon"
|
|
/>
|
|
Notifications
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
/>
|
|
Sign Out
|
|
</DropdownMenuItem>
|
|
</>
|
|
)
|
|
|
|
return (
|
|
<Example title="With Avatar">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<Button
|
|
variant="outline"
|
|
className="h-12 justify-start px-2 md:max-w-[200px]"
|
|
/>
|
|
}
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
|
|
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">shadcn</span>
|
|
<span className="text-muted-foreground truncate text-xs">
|
|
shadcn@example.com
|
|
</span>
|
|
</div>
|
|
<IconPlaceholder
|
|
lucide="ChevronsUpDownIcon"
|
|
tabler="IconSelector"
|
|
hugeicons="UnfoldMoreIcon"
|
|
phosphor="CaretUpDownIcon"
|
|
className="text-muted-foreground ml-auto"
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-(--anchor-width) min-w-56">
|
|
{menuContent}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={
|
|
<Button variant="ghost" size="icon" className="rounded-full" />
|
|
}
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
|
|
<AvatarFallback>LR</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" side="top">
|
|
{menuContent}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuInDialog() {
|
|
return (
|
|
<Example title="In Dialog">
|
|
<Dialog>
|
|
<DialogTrigger render={<Button variant="outline" />}>
|
|
Open Dialog
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Dropdown Menu Example</DialogTitle>
|
|
<DialogDescription>
|
|
Click the button below to see the dropdown menu.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Open Menu
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CopyIcon"
|
|
tabler="IconCopy"
|
|
hugeicons="CopyIcon"
|
|
phosphor="CopyIcon"
|
|
/>
|
|
Copy
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ScissorsIcon"
|
|
tabler="IconCut"
|
|
hugeicons="ScissorIcon"
|
|
phosphor="ScissorsIcon"
|
|
/>
|
|
Cut
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ClipboardPasteIcon"
|
|
tabler="IconClipboard"
|
|
hugeicons="ClipboardIcon"
|
|
phosphor="ClipboardIcon"
|
|
/>
|
|
Paste
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Save Page...</DropdownMenuItem>
|
|
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
|
|
<DropdownMenuItem>Name Window...</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
/>
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuComplex() {
|
|
const [notifications, setNotifications] = React.useState({
|
|
email: true,
|
|
sms: false,
|
|
push: true,
|
|
})
|
|
const [theme, setTheme] = React.useState("light")
|
|
|
|
return (
|
|
<Example title="Complex">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" className="w-fit" />}
|
|
>
|
|
Complex Menu
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>File</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileIcon"
|
|
tabler="IconFile"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileIcon"
|
|
/>
|
|
New File
|
|
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FolderIcon"
|
|
tabler="IconFolder"
|
|
hugeicons="FolderIcon"
|
|
phosphor="FolderIcon"
|
|
/>
|
|
New Folder
|
|
<DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="FolderOpenIcon"
|
|
tabler="IconFolderOpen"
|
|
hugeicons="FolderOpenIcon"
|
|
phosphor="FolderOpenIcon"
|
|
/>
|
|
Open Recent
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="CodeIcon"
|
|
phosphor="CodeIcon"
|
|
/>
|
|
Project Alpha
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="CodeIcon"
|
|
phosphor="CodeIcon"
|
|
/>
|
|
Project Beta
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="MoreHorizontalIcon"
|
|
tabler="IconDots"
|
|
hugeicons="MoreHorizontalCircle01Icon"
|
|
phosphor="DotsThreeOutlineIcon"
|
|
/>
|
|
More Projects
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="CodeIcon"
|
|
phosphor="FileCodeIcon"
|
|
/>
|
|
Project Gamma
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="CodeIcon"
|
|
phosphor="FileCodeIcon"
|
|
/>
|
|
Project Delta
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FolderSearchIcon"
|
|
tabler="IconFolderSearch"
|
|
hugeicons="SearchIcon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
/>
|
|
Browse...
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="SaveIcon"
|
|
tabler="IconDeviceFloppy"
|
|
hugeicons="FloppyDiskIcon"
|
|
phosphor="FloppyDiskIcon"
|
|
/>
|
|
Save
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="DownloadIcon"
|
|
tabler="IconDownload"
|
|
hugeicons="DownloadIcon"
|
|
phosphor="DownloadIcon"
|
|
/>
|
|
Export
|
|
<DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>View</DropdownMenuLabel>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.email}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({ ...notifications, email: checked === true })
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="EyeIcon"
|
|
tabler="IconEye"
|
|
hugeicons="EyeIcon"
|
|
phosphor="EyeIcon"
|
|
/>
|
|
Show Sidebar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.sms}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({ ...notifications, sms: checked === true })
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="LayoutIcon"
|
|
tabler="IconLayout"
|
|
hugeicons="LayoutIcon"
|
|
phosphor="LayoutIcon"
|
|
/>
|
|
Show Status Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="PaletteIcon"
|
|
tabler="IconPalette"
|
|
hugeicons="PaintBoardIcon"
|
|
phosphor="PaletteIcon"
|
|
/>
|
|
Theme
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
|
<DropdownMenuRadioGroup
|
|
value={theme}
|
|
onValueChange={setTheme}
|
|
>
|
|
<DropdownMenuRadioItem value="light">
|
|
<IconPlaceholder
|
|
lucide="SunIcon"
|
|
tabler="IconSun"
|
|
hugeicons="SunIcon"
|
|
phosphor="SunIcon"
|
|
/>
|
|
Light
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="dark">
|
|
<IconPlaceholder
|
|
lucide="MoonIcon"
|
|
tabler="IconMoon"
|
|
hugeicons="MoonIcon"
|
|
phosphor="MoonIcon"
|
|
/>
|
|
Dark
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="system">
|
|
<IconPlaceholder
|
|
lucide="MonitorIcon"
|
|
tabler="IconDeviceDesktop"
|
|
hugeicons="ComputerIcon"
|
|
phosphor="MonitorIcon"
|
|
/>
|
|
System
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Account</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="UserIcon"
|
|
tabler="IconUser"
|
|
hugeicons="UserIcon"
|
|
phosphor="UserIcon"
|
|
/>
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="SettingsIcon"
|
|
tabler="IconSettings"
|
|
hugeicons="SettingsIcon"
|
|
phosphor="GearIcon"
|
|
/>
|
|
Settings
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Preferences</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="KeyboardIcon"
|
|
tabler="IconKeyboard"
|
|
hugeicons="KeyboardIcon"
|
|
phosphor="KeyboardIcon"
|
|
/>
|
|
Keyboard Shortcuts
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="LanguagesIcon"
|
|
tabler="IconLanguage"
|
|
hugeicons="LanguageCircleIcon"
|
|
phosphor="TranslateIcon"
|
|
/>
|
|
Language
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="NotificationIcon"
|
|
phosphor="BellIcon"
|
|
/>
|
|
Notifications
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>
|
|
Notification Types
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.push}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({
|
|
...notifications,
|
|
push: checked === true,
|
|
})
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="NotificationIcon"
|
|
phosphor="BellIcon"
|
|
/>
|
|
Push Notifications
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={notifications.email}
|
|
onCheckedChange={(checked) =>
|
|
setNotifications({
|
|
...notifications,
|
|
email: checked === true,
|
|
})
|
|
}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="MailIcon"
|
|
tabler="IconMail"
|
|
hugeicons="MailIcon"
|
|
phosphor="EnvelopeIcon"
|
|
/>
|
|
Email Notifications
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ShieldIcon"
|
|
tabler="IconShield"
|
|
hugeicons="ShieldIcon"
|
|
phosphor="ShieldIcon"
|
|
/>
|
|
Privacy & Security
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="HelpCircleIcon"
|
|
tabler="IconHelpCircle"
|
|
hugeicons="HelpCircleIcon"
|
|
phosphor="QuestionIcon"
|
|
/>
|
|
Help & Support
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileTextIcon"
|
|
/>
|
|
Documentation
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
/>
|
|
Sign Out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Example>
|
|
)
|
|
}
|