Rock Mobile Docs

Tag

Inherits from RockMobile.StyledView

Tags are pill-shaped labels that help to mark and categorize content. They usually consist of relevant keywords which make it easier to find and browse the corresponding piece of content. These are not directly correlated with Rock Tags.

Properties

PropertyTypeDescription
TextstringThe text to display on the tag.
TypestringThe type (color) of the tag. Primary, Secondary, Success, Info, Warning Danger
SizestringThe size of tag to display. Small, Default, Large
TextColorColorSets text color using any of the supported formats.
BackgroundColorColorSets background color using any of the supported formats.
BorderColorColorSets border color using any of the supported formats.
BorderThicknessDoubleSets the thickness of the border. This can be a single value or a specific value for Left, Top, Right, Bottom.
 
<Rock:Tag Text="Articles"
     Type="Primary"
     Size="Default" />

Structure

When styling tags via CSS, it's helpful to understand how this control is built. The Tag contains two underlying controls:

  1. Styled View – This is the container control
  2. Label– This is the text for the tag

All tags have a .tag class attached to them.

If you add a type an additional class with the pattern of .tag-[typename] will be applied.

Each size (Small, Default, & Large) will have .tag-sm, .tag-default, and .tag-lg appended.

Note

The corner radius for Tags is calculated automatically by the shell to ensure the rounding is always correct regardless of the content or padding.

To style the text of a tag you'd want to have a style similar to:

.tag ^Label {
    color: red;
}