-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
437 additions
and
426 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Popover placement="bottom" showArrow={true}> | ||
| <PopoverTrigger> | ||
| <Button>Open Popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent> | ||
| <div className="px-1 py-2"> | ||
| <div className="text-small font-bold">Popover Content</div> | ||
| <div className="text-tiny">This is the popover content</div> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const backdrops = ["opaque", "blur", "transparent"]; | ||
|
|
||
| const content = ( | ||
| <PopoverContent className="w-[240px]"> | ||
| {(titleProps) => ( | ||
| <div className="px-1 py-2 w-full"> | ||
| <p className="text-small font-bold text-foreground" {...titleProps}> | ||
| Dimensions | ||
| </p> | ||
| <div className="mt-2 flex flex-col gap-2 w-full"> | ||
| <Input defaultValue="100%" label="Width" size="sm" variant="bordered" /> | ||
| <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" /> | ||
| <Input defaultValue="24px" label="Height" size="sm" variant="bordered" /> | ||
| <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </PopoverContent> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="flex flex-wrap gap-4"> | ||
| {backdrops.map((backdrop) => ( | ||
| <Popover key={backdrop} showArrow backdrop={backdrop} offset={10} placement="bottom"> | ||
| <PopoverTrigger> | ||
| <Button className="capitalize" color="warning" variant="flat"> | ||
| {backdrop} | ||
| </Button> | ||
| </PopoverTrigger> | ||
| {content} | ||
| </Popover> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const content = ( | ||
| <PopoverContent> | ||
| <div className="px-1 py-2"> | ||
| <div className="text-small font-bold">Popover Content</div> | ||
| <div className="text-tiny">This is the popover content</div> | ||
| </div> | ||
| </PopoverContent> | ||
| ); | ||
|
|
||
| const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"]; | ||
|
|
||
| return ( | ||
| <div className="flex flex-wrap gap-4"> | ||
| {colors.map((color) => ( | ||
| <Popover key={color} color={color} placement="top"> | ||
| <PopoverTrigger> | ||
| <Button className="capitalize" color={color}> | ||
| {color} | ||
| </Button> | ||
| </PopoverTrigger> | ||
| {content} | ||
| </Popover> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const [isOpen, setIsOpen] = React.useState(false); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}> | ||
| <PopoverTrigger> | ||
| <Button>Open Popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent> | ||
| <div className="px-1 py-2"> | ||
| <div className="text-small font-bold">Popover Content</div> | ||
| <div className="text-tiny">This is the popover content</div> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
apps/docs/content/components/popover/custom-motion.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Popover | ||
| showArrow | ||
| motionProps={{ | ||
| variants: { | ||
| enter: { | ||
| y: 0, | ||
| opacity: 1, | ||
| duration: 0.1, | ||
| transition: { | ||
| opacity: { | ||
| duration: 0.15, | ||
| }, | ||
| }, | ||
| }, | ||
| exit: { | ||
| y: "10%", | ||
| opacity: 0, | ||
| duration: 0, | ||
| transition: { | ||
| opacity: { | ||
| duration: 0.1, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }} | ||
| offset={10} | ||
| placement="bottom" | ||
| > | ||
| <PopoverTrigger> | ||
| <Button>Open Popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent> | ||
| <div className="px-1 py-2"> | ||
| <div className="text-small font-bold">Popover Content</div> | ||
| <div className="text-tiny">This is the popover content</div> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
apps/docs/content/components/popover/custom-styles.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Popover | ||
| showArrow | ||
| backdrop="opaque" | ||
| classNames={{ | ||
| base: [ | ||
| // arrow color | ||
| "before:bg-default-200", | ||
| ], | ||
| content: [ | ||
| "py-3 px-4 border border-default-200", | ||
| "bg-gradient-to-br from-white to-default-300", | ||
| "dark:from-default-100 dark:to-default-50", | ||
| ], | ||
| }} | ||
| placement="right" | ||
| > | ||
| <PopoverTrigger> | ||
| <Button>Open Popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent> | ||
| {(titleProps) => ( | ||
| <div className="px-1 py-2"> | ||
| <h3 className="text-small font-bold" {...titleProps}> | ||
| Popover Content | ||
| </h3> | ||
| <div className="text-tiny">This is the popover content</div> | ||
| </div> | ||
| )} | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| } |
Oops, something went wrong.