Build a modal

The Dialog component enables you to create a modal that opens when a connected event occurs. This tutorial outlines how to build a simple sign up modal that opens when a button is clicked:
1.​Add and configure a button: Used to open the modal.
2.​Add and configure a modal: Layout and design of the modal.
3.​Build the modal trigger logic: Applies the button click action to the modal open action.
When you complete this tutorial, your sign up modal will look similar to this:
Add and configure a button
This tutorial uses a simple sign up button to open a modal. To add and configure a sign up button for your application:
1.Open a new application and enter the Design view.
2.Open the Libraries panel and drag-and-drop a Button component into the application.
3.Double-click the Button's text to change the text label to Sign up.
Add and configure a modal
This section outlines how to build a sign up modal with input fields for user information:
1.Drag-and-drop a Dialog component into the application.
2.Select the Dialog component and navigate to the State menu.
3.Set open to True. This keeps the modal open in the Design view so you can configure its contents.
4.Drag-and-drop the following components into the Dialog component:
(2) Text
(2) Text Input
(1) Button
5.Open the Dialog's Styles menu and set Spacing to 10 and Padding to 20.
6.Rearrange the Dialog's components to alternate between Text and Text Input components, and place the Button at the bottom.
7.Double-click the Text components to change their text labels to Email and Password, and double-click the Button's text to change its text label to Sign up.
8.Select the Text Input components and open the quick selection Styles menu.
9.Open the Size menu and set the Width to Fill container.
Build the modal trigger logic
This section explains how to build the application logic that enables your modal to open when the sign up button is clicked:
1.Navigate to the Logic view and open the Libraries panel.
2.Scroll down to the Design References section, and drag-and-drop the following references into your application:
Button
Dialog
3.Connect the Button's onClick action to the Dialog's open event. This sets the modal to open when the button is clicked.
4.Preview your application to ensure the modal opens when the button is clicked.
Congratulations! You can now build modals and implement them in your applications.
Last modified 1mo ago