Tags can be applied in line with text.
Tags are inline elements that automatically scale to match the size of the surrounding text.
<h2> Skinny Jeans <ma-tag type='primary'> New </ma-tag> </h2>
<h6> Mustache Wax <ma-tag type='warning' [pill]='true'> 6oz. </ma-tag> </h6>
Tags can use any of the theme's 6 colors:
primary
, secondary
, success
,
info
, warning
, or danger
. Use
the [pill]
property to give the rounded edges.
Tags work in the middle of a sentence: AAPL
Tags call attention to navigation items.
Tags may be used to call the user's attention to something that has happened in a different view, e.g. by badging a nav item. Try adding tags to some of the items in the side navigation.
The following source demonstrates a badged side navigation item.
<ma-side-nav-item> <fa name='home'></fa> About <ma-tag type='primary' [pill]='true' class='float-xs-right'> BADGE CONTENT </ma-tag> </ma-side-nav-item>
When a badge appears inside a navigation item, it becomes slightly larger, has a border, and has dark text. Badges are hidden automatically when empty. (This demo checks for a zero count and returns an empty string.)