Modal
Last updated
Was this helpful?
Last updated
Was this helpful?
In Lowcoder, the Modal component is a versatile container designed to display content in an overlay, effectively capturing user attention for specific interactions or information. It functions similarly to other container components like Form or Drawer allowing you to embed various UI elements or modules within it.
Key Features:
Content Display: The Modal can house multiple components, enabling the creation of complex interfaces within the overlay. This is particularly useful for tasks such as form submissions, displaying detailed information, or presenting user prompts/alerts. User can drag/insert different components inside the Modal component.
Event Handling: You can define event handlers for the Modal to manage user interactions effectively. For instance, triggering specific actions when the Modal is opened or closed enhances the interactivity of your application.
Styling and Customisation: The Modal supports extensive styling options, allowing you to align its appearance with your application's design. You can customize aspects such as colors, borders, backgrounds etc to create a cohesive user experience.
By leveraging the Modal component, you can effectively manage user focus and interactions, presenting essential information or actions in a centralised overlay within your Lowcoder applications.
On Component Playground, you can interact with the Modal component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Modal component.
In the Auto-Docs of Modal component, we have shown how to use different properties of the Modal component. It also includes the Styling properties of the Modal component.
These properties are accessible in {{ }} notations, as well as in JavaScript Queries.
visible
Boolean
Returns True or False based on whether the Modal component is visible or not
Events give you the ability to trigger further actions (with Event-Handlers).
Open
When a User "opens" a Modal
Close
When a User "closes" a Modal
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
setVisible
Set the value of the property Visible
resetVisible
Reset the value of the property Visible
clearVisible
Clear the value of the property Visible