Differences

This shows you the differences between two versions of the page.

--- flutterui:badge_component [2025/09/15 11:51]
admin
+++ flutterui:badge_component [2025/09/17 12:00] (current)
admin
@@ Line 9: / Line 9: @@
 Show **9** as label
 <code java">
-Style.addStyleNames(comp, "f_badge_9");
+Style.addStyleNames(comp, "f_badge_text_9");
 </code>
@@ Line 32: / Line 32: @@
 </code>
+Set color:
+<code java>
+Style.addStyleNames(comp, "f_badge_color_#888888");
+</code>
+Set text color:
+<code java>
+Style.addStyleNames(comp, "f_badge_textcolor_#0000aa");
+</code>
+\\ \\
+But it's much easier to use the **API**:
+<code java>
+BadgeUtil.setOption(comp, BadgeUtil.OPTION_TEXT, "9");
+</code>
+which is the same as:
+<code java>
+BadgeUtil.setBadge(this, comp, "9");
+</code>
+The last method supports multiple options like:
+<code java>
+BadgeUtil.setBadge(this, comp, "9",
+    BadgeUtil.OPTION_COLOR + "#205090",
+    BadgeUtil.OPTION_ALIGN + BadgeUtil.Alignment.bottomLeft,
+    BadgeUtil.OPTION_OFFSET + "20",
+    BadgeUtil.OPTION_BORDER + "2_" + UIColor.white.toHex());
+</code>
+The API calls will replace available styles! If you set the style on your own, you should replace style names correctly, e.g.
+<code java>
+Style.addStyleNames(comp, "f_badge_text_9");
+Style.removeStyleNames(comp, "f_badge_text_9");
+Style.addStyleNames(comp, "f_badge_text_10");
+</code>
+\\ \\
+It's also possible to set screen badges (for the menu):
+<code java>
+BadgeUtil.setBadge(this, UsersWorkScreen.class, Integer.valueOf(1));
+</code>
+This will show a badge in the menu, e.g.:
+{{:flutterui:menubadge.png?nolink&width=400|}}