🧬 Assemble components
In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user’s workflow and drawing their attention to the modal content.
Properties | Description |
---|---|
Event handler | detecting and responding to specific user actions or events, such as clicks, keypresses, value changes |
Click mask to close modal | whether clicking on the background overlay or mask of the modal will close the modal window |
Show header | whether the component should display a header or title section |
Show footer | whether the component should display a footer section |
Border Color | color of the border that surrounds a modal component |
Border Radius | curvature of the corners of a modal component’s border |
Border Width | thickness or width of the border surrounding a modal component |
Background | defines the color or image that fills the content area of a modal component |
You can use other components to control the component. We support the following two methods:
open the modal component
close the modal component
We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.
Add a button
component labeled “Open Modal”
Add a modal component to the canvas.
For the “Open Modal” button
components, we can configure it to open the modal
component if clicked.
button
component to open its inspect page. Under Event handler
, click **+ New**
.Control component
in action, and select the modal
component that you want to update as the target of the event.openModal
methodClick this button to open the modal component and you may put whatever you want in the middle area of the modal.
For the “Cancel” button
component, we can configure it to close the modal if clicked
button
component to open its inspect page. Under Event handler
, click **+ New**
.Control component
in action, and select the modal
component that you want to update as the target of the event.closeModal
methodSimilarly, we can configure the “Confirm” button to congrats
button
component to open its inspect page. Under Event handler
, click **+ New**
.Show notification
in action, title
“Congrat!” and description
“Congratulations!“. Choose Success
for type
, put {{2000}}
for the duration
(2 seconds)