Badge
Check out the function of the Badge element!
It usually shows the number of notifications in the application with a notification icon inserted into it.
Adding Badge
You can add the Badge element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add the Badge element.
The Badge element is supported in both mobile and web applications.
1. Properties
Multiple elements can be added to the Badge element, such as a Container element. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.
Count
You can add a static value to the Count field, or you can dynamically bring a state, Input element content or a value of an action result via Symbol Picker.
Show Zero
For example, you can set whether the notification number is 0 (zero) or not. You can make this display dynamically by means of Symbol Picker a state, Input element content or a value of an action result.
Max
You can set the maximum value it can take. You can add a static value to the Max field, or you can dynamically bring a state, Input element content or a value of an action result via Symbol Picker.
Dot
Regardless of the number of related values, you can have it displayed only as a point instead of a numeric display.
Authorization (Yetkilendirme)
You can use the authorization options for the Badge element.
Visibility
You can manage the visibility of the element. It is always visible or hidden, or you can make it appear or hide depending on a condition.
You can add actions that you can add to the Badge element with Add Actions.
2. Styling
You can make additional edits to the Badge element by adding a layout, fill, border, or shadow.
You can make visual adjustments such as environmental interior spaces and sizing.
You can set the properties such as the color and size of the Badge text and icon with the Text section.
You can add color or image to the body of the badge.
You can add lines to the outer edges of the badge, and give corner bevels.
You can add a shadow effect to the Badge element.
Last updated
