43 lines
1.0 KiB
Markdown
43 lines
1.0 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Modal
|
|
- rx.chakra.ModalOverlay
|
|
- rx.chakra.ModalContent
|
|
- rx.chakra.ModalHeader
|
|
- rx.chakra.ModalBody
|
|
- rx.chakra.ModalFooter
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# 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.
|
|
|
|
```python demo exec
|
|
class ModalState(rx.State):
|
|
show: bool = False
|
|
|
|
def change(self):
|
|
self.show = not (self.show)
|
|
|
|
|
|
def modal_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.button("Confirm", on_click=ModalState.change),
|
|
rx.chakra.modal(
|
|
rx.chakra.modal_overlay(
|
|
rx.chakra.modal_content(
|
|
rx.chakra.modal_header("Confirm"),
|
|
rx.chakra.modal_body("Do you want to confirm example?"),
|
|
rx.chakra.modal_footer(rx.chakra.button("Close", on_click=ModalState.change)),
|
|
)
|
|
),
|
|
is_open=ModalState.show,
|
|
),
|
|
)
|
|
```
|