Tag
Collaborate with us
Edit this page on GitHub
You can use the Tag UI Pattern to style small texts in a colored tag format. Use the Tags UI Pattern to display statuses, labels, or categories thus providing great user experience.
How to use the Tag UI Pattern
-
In Service Studio, in the Toolbox, search for
Tag.The Tag widget is displayed.
-
To From the Toolbox, drag the Tag widget into the Main Content area of your application's screen.
-
Add your content to the placeholders. In this example, we add some text.
-
On the properties tab, you can change the Tag's look and feel by setting the (optional) properties, for example, size and color.
After following these steps and publishing the module, you can test the pattern in your app.
Properties
| Property | Description |
|---|---|
| Color (Color Identifier): Optional | Set the Tag's background color. Red, orange, yellow, lime, green, blue, violet, and pink are just some of predefined colors available. Examples
|
| Shape (Shape Identifier): Optional | Set the Tag's shape. Rounded, soft rounded, and sharp are the predefined shapes available. Examples
|
| Size (Size Identifier): Optional | Set the Tag's size. Small and medium are the predefined sizes available. Examples
|
| IsLight (Boolean): Optional | Specify the Tag's background color. Examples
|
| ExtendedClass (Text): Optional | Add custom style classes to the Tag UI Pattern. You define your custom style classes in your application using CSS. Examples
|