Modal
Usage
Modals display important information or require user confirmation before proceeding. They overlay the current screen and can be closed by clicking the overlay or the close button.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Visible property to a variable to control when the modal appears.
Opening and Closing
Opening a Modal
Set(varShowModal, true);
Closing a Modal
Set(varShowModal, false);
Modal Structure
The modal exports as a container with an overlay and content card:
ModalContainer:
Type: Container
Visible: varShowModal
Fill: RGBA(0, 0, 0, 0.5)
ModalCard:
Type: Container
Background: RGBA(255, 255, 255, 1)
BorderRadius: 12
Sizes
- Small: Compact modal for simple confirmations
- Medium: Standard size (default)
- Large: For detailed content
Close Behavior
- Show close (X): Displays a close button in the top-right corner
- Close on overlay click: Allows closing by clicking outside the modal
Buttons
- Primary button: Main action (e.g., "Confirm")
- Secondary button: Cancel or alternative action (e.g., "Cancel")
Color Modes
- Default colors: Uses predefined colors.
- Custom colors: Edit overlay, surface, text, and button colors directly.
- Theme Tokens: Uses tokens from Theme Builder (Pro feature).
Export Modes
- Safe: Basic modal structure with title and body.
- Advanced: Includes custom colors, shadows, and advanced styling (Pro feature).
Example
Set(varShowConfirm, false);
ConfirmModal:
Type: Container
Visible: varShowConfirm
Fill: RGBA(0, 0, 0, 0.5)
OnSelect: Set(varShowConfirm, false)
ModalContent:
Type: Container
Background: RGBA(255, 255, 255, 1)
BorderRadius: 12
Padding: 24
ModalTitle:
Type: Label
Text: "Confirm action"
FontSize: 18
FontWeight: FontWeight.Semibold
ModalBody:
Type: Label
Text: "Are you sure you want to continue?"
FontSize: 14
ConfirmBtn:
Type: Button
Text: "Confirm"
OnSelect: Set(varShowConfirm, false); Navigate(NextScreen)
CancelBtn:
Type: Button
Text: "Cancel"
OnSelect: Set(varShowConfirm, false)