46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.AlertDialog
|
|
- rx.chakra.AlertDialogOverlay
|
|
- rx.chakra.AlertDialogContent
|
|
- rx.chakra.AlertDialogHeader
|
|
- rx.chakra.AlertDialogBody
|
|
- rx.chakra.AlertDialogFooter
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# AlertDialog
|
|
|
|
AlertDialog component is used to interrupt the user with a mandatory confirmation or event.
|
|
The component will appear in front of the page prompting the user to conplete an event.
|
|
|
|
```python demo exec
|
|
class AlertDialogState(rx.State):
|
|
show: bool = False
|
|
|
|
def change(self):
|
|
self.show = not (self.show)
|
|
|
|
|
|
def alertdialog_example():
|
|
return rx.chakra.vstack(
|
|
rx.chakra.button("Show Alert Dialog", on_click=AlertDialogState.change),
|
|
rx.chakra.alert_dialog(
|
|
rx.chakra.alert_dialog_overlay(
|
|
rx.chakra.alert_dialog_content(
|
|
rx.chakra.alert_dialog_header("Confirm"),
|
|
rx.chakra.alert_dialog_body("Do you want to confirm example?"),
|
|
rx.chakra.alert_dialog_footer(
|
|
rx.chakra.button("Close", on_click=AlertDialogState.change)
|
|
),
|
|
)
|
|
),
|
|
is_open=AlertDialogState.show,
|
|
),
|
|
width="100%",
|
|
)
|
|
```
|