Kuika's Badge element is used to emphasize or highlight certain information in the user interface. Badge is used as a small, eye-catching label, often used to display numbers, status information or notifications. It is particularly useful for tracking user interactions or ensuring that important information is not overlooked. For example, a Badge attached to a notification icon can show the number of unread messages. In this tutorial, you will learn how to use the Badge element to present the information you want to highlight in your app.
The Badge element has the following functionalities:
Number of Notifications: The most common use of the Badge element is to show the number of notifications. For example, it can be used to show how many new messages you have in a chat app, or the number of unread emails in an email client.
Status Indicator: Badge elements can be used to show the status of a particular object. For example, in a to-do list application, it is useful to show the number of unfinished tasks.
Permission Status: When managing user permissions, Badge elements can be used to show the active or inactive status of a particular permission. For example, an app can use a Badge to show the status of the camera permission.
Social Network Notifications: In social media apps, Badge elements can be used to show new interactions (likes, comments, shares) or notification counts.
Map or Journey Apps: In GPS or mapping applications, Badge elements can be used to show the user information such as distance traveled, time remaining to destination or directions.
Games: In games, Badge elements can be used to show users in-game achievements, points or progress.
Badge element supports web and mobile applications.
This training content consists of the following topics:
Adding a Badge element,
Badge element properties,
Authorization,
Visibility,
Editability,
Customize the interface design with Style Panel.
Add Badge Element
After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.
In the “UI Design” (1) module, drag and drop the Badge element (4) under the “Display” (3) category from the “Elements” (2) panel on the left side to the screen.
If you drag the Badge element from the Elements panel to an empty space on the screen, it will be added with the Row element. If you drag it into a Column, you will add only the Badge element. You can add a Badge element to all Container type elements.
Badge Element Properties
In the Properties panel:
Count: You can add a static value to the Count field, or you can dynamically get a status, the content of an Input element or a value of an action result via Symbol Picker.
Show Zero: You can set whether to show the number of notifications when the count is zero. This can be done by dynamically providing a status, the content of an Input element or a value of an action result via Symbol Picker.
Max: You can set the maximum value it can take. You can add a static value to the Max field, or you can dynamically retrieve a status, the content of an Input element or a value of an action result via the Symbol Picker.
Dot: Regardless of the number of values involved, you can have it displayed only as a dot instead of a numeric representation.
Authorization.
You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.
For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.
Visibility.
It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.
Click on the element on the screen.
Open the “Properties” panel on the right side.
Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.
Always Visible: Ensures that the screens in your app are always visible.
Hidden: Allows hiding screens in your application.
Sometimes Visible: Makes screens in your application conditionally visible.
Editability
Allows you to make elements editable.
Enabled: Selecting this option makes the element editable.
Disabled: In this case, the element cannot be edited.
Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.
Customize the İnterface Design with Style Panel
By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.
The sections defined below vary depending on the element.
Layout: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
Fill: You can use the Fill setting to customize the element's background with color or images.
Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.
