Differences

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

--- flutterui:badge_component [2025/09/15 11:50]
admin created
+++ flutterui:badge_component [2025/09/17 12:00] (current)
admin
@@ Line 8: / Line 8: @@
 Show **9** as label
-<file style="java">
+<code java">
-Style.addStyleNames(comp, "f_badge_9");
+Style.addStyleNames(comp, "f_badge_text_9");
 </code>
 Set border size and color:
-<code>
+<code java>
 Style.addStyleNames(comp, "f_badge_border_2_#aa0000");
 </code>
 Set alignment:
-<code>
+<code java>
 Style.addStyleNames(comp, "f_badge_align_bottomRight");
 </code>
@@ Line 24: / Line 24: @@
 Set an offset for x and y position:
+<code java>
 Style.addStyleNames(comp, "f_badge_offset_10_5");
+</code>
  or just x:
+<code java>
 Style.addStyleNames(comp, "f_badge_offset_20");
+</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|}}