147 lines
3.5 KiB
Markdown
147 lines
3.5 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.popover.root
|
|
- rx.radix.popover.content
|
|
- rx.radix.popover.trigger
|
|
- rx.radix.popover.close
|
|
|
|
only_low_level:
|
|
- True
|
|
|
|
PopoverRoot: |
|
|
lambda **props: rx.radix.themes.popover.root(
|
|
rx.radix.themes.popover.trigger(
|
|
rx.radix.themes.button("Popover"),
|
|
),
|
|
rx.radix.themes.popover.content(
|
|
rx.radix.themes.flex(
|
|
rx.radix.themes.text("Simple Example"),
|
|
rx.radix.themes.popover.close(
|
|
rx.radix.themes.button("Close"),
|
|
),
|
|
direction="column",
|
|
spacing="3",
|
|
),
|
|
),
|
|
**props
|
|
)
|
|
|
|
PopoverContent: |
|
|
lambda **props: rx.radix.themes.popover.root(
|
|
rx.radix.themes.popover.trigger(
|
|
rx.radix.themes.button("Popover"),
|
|
),
|
|
rx.radix.themes.popover.content(
|
|
rx.radix.themes.flex(
|
|
rx.radix.themes.text("Simple Example"),
|
|
rx.radix.themes.popover.close(
|
|
rx.radix.themes.button("Close"),
|
|
),
|
|
direction="column",
|
|
spacing="3",
|
|
),
|
|
**props
|
|
),
|
|
)
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Popover
|
|
|
|
A popover displays content, triggered by a button.
|
|
|
|
The `popover.root` contains all the parts of a popover.
|
|
|
|
The `popover.trigger` contains the button that toggles the popover.
|
|
|
|
The `popover.content` is the component that pops out when the popover is open.
|
|
|
|
The `popover.close` is the button that closes an open popover.
|
|
|
|
## Basic Example
|
|
|
|
```python demo
|
|
rx.popover.root(
|
|
rx.popover.trigger(
|
|
rx.button("Popover"),
|
|
),
|
|
rx.popover.content(
|
|
rx.flex(
|
|
rx.text("Simple Example"),
|
|
rx.popover.close(
|
|
rx.button("Close"),
|
|
),
|
|
direction="column",
|
|
spacing="3",
|
|
),
|
|
),
|
|
)
|
|
```
|
|
|
|
## Examples in Context
|
|
|
|
```python demo
|
|
|
|
rx.popover.root(
|
|
rx.popover.trigger(
|
|
rx.button("Comment", variant="soft"),
|
|
),
|
|
rx.popover.content(
|
|
rx.flex(
|
|
rx.avatar(
|
|
"2",
|
|
fallback="RX",
|
|
radius="full"
|
|
),
|
|
rx.box(
|
|
rx.text_area(placeholder="Write a comment…", style={"height": 80}),
|
|
rx.flex(
|
|
rx.checkbox("Send to group"),
|
|
rx.popover.close(
|
|
rx.button("Comment", size="1")
|
|
),
|
|
spacing="3",
|
|
margin_top="12px",
|
|
justify="between",
|
|
),
|
|
flex_grow="1",
|
|
),
|
|
spacing="3"
|
|
),
|
|
style={"width": 360},
|
|
)
|
|
)
|
|
```
|
|
|
|
```python demo
|
|
rx.popover.root(
|
|
rx.popover.trigger(
|
|
rx.button("Feedback", variant="classic"),
|
|
),
|
|
rx.popover.content(
|
|
rx.inset(
|
|
side="top",
|
|
background="url('https://source.unsplash.com/random/800x600') center/cover",
|
|
height="100px",
|
|
),
|
|
rx.box(
|
|
rx.text_area(placeholder="Write a comment…", style={"height": 80}),
|
|
rx.flex(
|
|
rx.checkbox("Send to group"),
|
|
rx.popover.close(
|
|
rx.button("Comment", size="1")
|
|
),
|
|
spacing="3",
|
|
margin_top="12px",
|
|
justify="between",
|
|
),
|
|
padding_top="12px",
|
|
),
|
|
style={"width": 360},
|
|
)
|
|
)
|
|
```
|