Library
/
Overlay
/
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.
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",
),
),
)
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},
),
)
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},
),
)
Wraps the control that will open the popover.
No component specific props
Wraps the control that will close the popover.
No component specific props
Did you find this useful?