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:
When you complete this tutorial, your sign up modal will look similar to this:
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
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
10and Padding to
- 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
Password, and double-click the Button's text to change its text label to
- 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.
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:
- 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.