Alert dialog pops up on the screen to provide important information or to prompt the user for a decision. Alert dialogs are commonly used to display critical messages, warnings, or to confirm an action from the user.
Here, By incorporating an alert dialog widget within your application, you can seamlessly integrate prompts or warnings to engage users and guide their interactions.
Alert Dialog
To utilize an Alert Dialog in your UI, adhere to these steps:
1. Drag the Alert dialog widget from the Insert menu and drop it into your desired location within your UI.
2. Customize the appearance and behavior of the Alert dialog by adjusting its properties in the editing section on the right.
3. Preview the Alert dialog by checking the Dialog box in the preview section to ensure it appears as expected in your UI.
| Component | Description |
|---|---|
| Align Icons | Click icons or use shortcut keys to align Alert Dialog. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Alert Dialog. |
| Postitions | Set Alert-Dialog box positions on the X and Y axis of the mobile canvas. |
| Container Size | Specify the width and height of the Dialog box by providing values for width (w) and height (h). |
| Z rotation | Rotate the Dialog box by specifying a rotation value. |
| Border Radius | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. |
| Margin | Provide margin to the text from any of the four directions by specifying the margin value. |
| Show Preview | It will show the preview of the dialog box. |
| Fill | This section will give dialog box a decoration. |
| Elevation | Specify the elevation that you want to give to the dialog box. |
| Title | Specify the title of the Alert dialog box |
| Content | Specify the content inside the dialog box that you want to show. |
| Cancel Text | Provide the cancel text for canceling the Alert dialog box. If you don't want to show the cancel text then you hide it by checking the checkbox Is show Cancel text. |
| Ok Text | Provide the Ok text of the Alert dialog box for confirming it. |
| Fill | Specify the color of the box from here either by picking or giving the hex code of the color. |
| Border Color | Choose a color to set the dialog box border color. Adjust the border color from inside, outside, or center of the dialog box by selecting it from the drop-down. |
| Border Width | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. |
| Shadow | Apply a shadow effect to the container by selecting either a normal or inner shadow type. |
| Visible | By checking the checkbox the entire selected list will be hidden. |
If you have any ideas to make Blup better you can share them through our Discord community channel