✎ Component badge | Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

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