The Tag element is a customizable container for displaying a set of tag items with optional interactivity. Each tag can be styled with colors, text formatting, and corner radius. It supports click and long-click events, and its Items array holds the individual tags displayed inside.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Name | String | {name} | Unique identifier for the tag element. |
| Enable | Boolean | true | Determines whether the tag is active or disabled. |
| Elevation | Number | 0 | Shadow depth of the tag element. |
| Items | Array |
[] | List of tag items displayed inside the element. |
| Text.Color | Color | {textColor} | Color of the tag text. |
| Text.Style | TextStyle | {textStyle} | Style of the text (e.g., bold, italic). |
| Text.Size | Number | 16 | Font size of the tag text. |
| Color | Color | {color} | Background color of the tag element. |
| Radius | Number | 10 | Corner radius of the tag element. |
| Margin | Number | 20 | Outer spacing around the tag element. |
| MarginLine | Number | 10 | Vertical spacing relative to other elements. |
| OnClick | Array |
[] | Actions triggered when the tag is clicked. |
| OnLongClick | array |
[] | Actions triggered on a long press. |
Coding:
{
"@Type": "Tag",
"Name": "{name}",
"Enable": true,
"Elevation": 0,
"Items": [],
"Text.Color": "{textColor}",
"Text.Style": "{textStyle}",
"Text.Size": 16,
"Color": "{color}",
"Radius": 10,
"Margin": 20,
"MarginLine": 10,
"OnClick": [],
"OnLongClick": []
}To see how to create this element in Applin Studio (no-code mode), visit:
Design the Tag in Applin Studio