mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
feat: add dropdown menu dialog example (#8438)
* feat: add dropdown menu dialog example * chore: remove dropdown-dialog
This commit is contained in:
shadcn
GitHub
@@ -93,3 +93,19 @@ import {
|
||||
name="dropdown-menu-radio-group"
|
||||
description="A dropdown menu with radio items."
|
||||
/>
|
||||
|
||||
### Dialog
|
||||
|
||||
This example shows how to open a dialog from a dropdown menu.
|
||||
|
||||
Use `modal={false}` on the `DropdownMenu` component.
|
||||
|
||||
```tsx showLineNumbers
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">Actions</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</DropdownMenu>
|
||||
```
|
||||
|
||||
<ComponentPreview name="dropdown-menu-dialog" />
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "dropdown-menu-dialog",
|
||||
"type": "registry:example",
|
||||
"registryDependencies": [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\">\n <MoreHorizontalIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuGroup>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you're\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4710,6 +4710,23 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dropdown-menu-dialog",
|
||||
"type": "registry:example",
|
||||
"registryDependencies": [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
"type": "registry:example"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hover-card-demo",
|
||||
"type": "registry:example",
|
||||
|
||||
@@ -4710,6 +4710,23 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dropdown-menu-dialog",
|
||||
"type": "registry:example",
|
||||
"registryDependencies": [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
"type": "registry:example"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hover-card-demo",
|
||||
"type": "registry:example",
|
||||
|
||||
@@ -5804,6 +5804,24 @@ export const Index: Record<string, any> = {
|
||||
categories: undefined,
|
||||
meta: undefined,
|
||||
},
|
||||
"dropdown-menu-dialog": {
|
||||
name: "dropdown-menu-dialog",
|
||||
description: "",
|
||||
type: "registry:example",
|
||||
registryDependencies: ["dropdown-menu","dialog","button","input","label"],
|
||||
files: [{
|
||||
path: "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
type: "registry:example",
|
||||
target: ""
|
||||
}],
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("@/registry/new-york-v4/examples/dropdown-menu-dialog.tsx")
|
||||
const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
categories: undefined,
|
||||
meta: undefined,
|
||||
},
|
||||
"hover-card-demo": {
|
||||
name: "hover-card-demo",
|
||||
description: "",
|
||||
|
||||
115
apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx
Normal file
115
apps/v4/registry/new-york-v4/examples/dropdown-menu-dialog.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { MoreHorizontalIcon } from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/new-york-v4/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/registry/new-york-v4/ui/dialog"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/registry/new-york-v4/ui/dropdown-menu"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/registry/new-york-v4/ui/field"
|
||||
import { Input } from "@/registry/new-york-v4/ui/input"
|
||||
import { Label } from "@/registry/new-york-v4/ui/label"
|
||||
import { Textarea } from "@/registry/new-york-v4/ui/textarea"
|
||||
|
||||
export default function DropdownMenuDialog() {
|
||||
const [showNewDialog, setShowNewDialog] = useState(false)
|
||||
const [showShareDialog, setShowShareDialog] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" aria-label="Open menu" size="icon-sm">
|
||||
<MoreHorizontalIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-40" align="end">
|
||||
<DropdownMenuLabel>File Actions</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onSelect={() => setShowNewDialog(true)}>
|
||||
New File...
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => setShowShareDialog(true)}>
|
||||
Share...
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled>Download</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New File</DialogTitle>
|
||||
<DialogDescription>
|
||||
Provide a name for your new file. Click create when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup className="pb-3">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="filename">File Name</FieldLabel>
|
||||
<Input id="filename" name="filename" placeholder="document.txt" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit">Create</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share File</DialogTitle>
|
||||
<DialogDescription>
|
||||
Anyone with the link will be able to view this file.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup className="py-3">
|
||||
<Field>
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="shadcn@vercel.com"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="message">Message (Optional)</FieldLabel>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Check out this file"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit">Send Invite</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1300,6 +1300,23 @@ export const examples: Registry["items"] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "dropdown-menu-dialog",
|
||||
type: "registry:example",
|
||||
registryDependencies: [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label",
|
||||
],
|
||||
files: [
|
||||
{
|
||||
path: "examples/dropdown-menu-dialog.tsx",
|
||||
type: "registry:example",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "hover-card-demo",
|
||||
type: "registry:example",
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "dropdown-menu-dialog",
|
||||
"type": "registry:example",
|
||||
"registryDependencies": [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\">\n <MoreHorizontalIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuGroup>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you're\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4710,6 +4710,23 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dropdown-menu-dialog",
|
||||
"type": "registry:example",
|
||||
"registryDependencies": [
|
||||
"dropdown-menu",
|
||||
"dialog",
|
||||
"button",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/examples/dropdown-menu-dialog.tsx",
|
||||
"type": "registry:example"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hover-card-demo",
|
||||
"type": "registry:example",
|
||||
|
||||
Reference in New Issue
Block a user