~~NOTRANS~~
~~Title: Component badge~~
Its super simple to show component badges like: 

{{:flutterui:mobile_badge.png?nolink&400|}}

Just use styles:

Show **9** as label
<code java">
Style.addStyleNames(comp, "f_badge_text_9");
</code>

Set border size and color:
<code java>
Style.addStyleNames(comp, "f_badge_border_2_#aa0000");
</code>

Set alignment:
<code java>
Style.addStyleNames(comp, "f_badge_align_bottomRight");
</code>
Possible values are: topLeft, topRight, bottomLeft, bottomRight, center

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|}}