Tag
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.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
-
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 | Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS. Examples
|