diff --git a/docs/resources/ui/widgets/built-in-widgets/badge.md b/docs/resources/ui/widgets/built-in-widgets/badge.md index 5f481660..f0316ecd 100644 --- a/docs/resources/ui/widgets/built-in-widgets/badge.md +++ b/docs/resources/ui/widgets/built-in-widgets/badge.md @@ -4,20 +4,17 @@ tags: [Base Elements] # Badge -The Badget widget indicates the number of items that need your attention. Typically it's a medium-sized dot that floats over other widgets such as IconButton. +The **Badge** widget displays a small indicator over a child widget. It commonly shows a numeric count, but it can also display short text. For example, use it to show the number of unread notifications or items in a shopping cart. -For example, You could use the badge widget to show the number of unread notifications and items in your shopping cart. +![Badges displaying notification and shopping cart counts](imgs/img_3.png) -![img_3.png](imgs/img_3.png) +## Adding the Badge Widget -## Adding Badge widget +To add the Badge widget: -Here's an example of how you can add the Badge widget to your project: - -1. First, drag the **Badge** widget from the Base Elements tab and carefully drop it into the -Actions section of the AppBar. -2. Now, add the **IconButton** widget inside the **Badge** widget. Customize the Icon and its color as per your requirement. -3. Select the **Badge** widget, move to the properties panel, and set the **top** side padding to 5 and **right** side padding to 15. +1. Drag the **Badge** widget from the **Base Elements** section to the desired location, such as the **Actions** section of an AppBar. +2. Add a child widget, such as an **IconButton**, and customize it as needed. +3. Under **Badge Properties**, adjust **Padding** to position the badge over the child widget.
-
- -

- -### Styling badge text - -To change the badge text style: - -1. Select the **Badge** widget from the widget or the canvas area. -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the **Theme Text Style** property and change the style as per instructions -[here](../../widgets/basic-widgets/text.md). - -### Show/hide badge - -You might want to hide the badge widget initially and only show it when some items need the user's attention—for example, showing the notification badge only when there are new/unread notifications. - -To show/hide the badge widget: - -1. Select the **Badge** widget from the widget or the canvas area. -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the **Show Badge** property and check/uncheck to show/hide the badge. Most probably, you would set this value from the variable such as the app state variable and variable from API response. To do so, click on the **Set from Variable**. - -
- -
- -### Changing badge color - -To change the badge color: - -1. Select the **Badge** widget from the widget or the canvas area. -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the Badge Color property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected colorand enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. - -
- -
- -### Changing elevation - -To change the elevation (depth or Z-axis) of the badge: - -1. Select the **Badge** widget from the widget or the canvas area. - -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the **Elevation** input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, and the 0 value removes the shadow. - -
- -
- -### Changing badge position - -By default, the badge is displayed on the top right side of its child widget. You can change its position and bring it to the left side. - -To change the badge position: - -1. Select the **Badge** widget from the widget or the canvas area. -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the **Position (Start or End)** property and click on the icons to change the position. - -
- -
- -### Allow animating badge - -By default, the badge widget animates whenever the value is changed. - -To allow/disallows animating badge: - -1. Select the **Badge** widget from the widget or the canvas area. - -2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. -3. Find the **Animate** toggle, and then turn it on or off. - -
- -
+- **Text:** Sets the text displayed in the badge, typically a number. You can enter a fixed value or set it dynamically from a variable, then expand **Text** to customize the text style. +- **Show Badge:** Controls whether the badge is visible. Set this option from a variable to show the badge only when users need to see it. +- **Badge Color:** Sets the badge's background color. +- **Elevation:** Controls the badge's visual depth and shadow prominence. Use `0` to remove the shadow. +- **Position (Start or End):** Positions the badge on the start or end side of its child widget. +- **Padding:** Adjusts the space around the badge to fine-tune its position over the child widget. +- **Animate:** Controls whether the badge animates when its value changes.