✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Modal
A modal dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.
class ModalState(rx.State):
show: bool = False
def change(self):
self.show = not (self.show)
rx.box(
rx.button("Confirm", on_click=ModalState.change),
rx.modal(
rx.modal_overlay(
rx.modal_content(
rx.modal_header("Confirm"),
rx.modal_body(
"Do you want to confirm example?"
),
rx.modal_footer(
rx.button(
"Close", on_click=ModalState.change
)
),
)
),
is_open=ModalState.show,
),
)Modal
The wrapper that provides context for its children.
ModalBody
The wrapper that houses the modal's main content.
No props for ModalBody.
Base Event Triggers
ModalHeader
The header that labels the modal dialog.
No props for ModalHeader.
Base Event Triggers
The footer that houses the modal events.
No props for ModalFooter.
Base Event Triggers
ModalContent
The container for the modal dialog's content.
No props for ModalContent.
Base Event Triggers
ModalOverlay
The dimmed overlay behind the modal dialog.
No props for ModalOverlay.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.