Tag
Tags allow users to categorize, label or organize content using keywords.
There are two methods available for creating tag components: utilizing content properties or employing slot projection.
Content properties
To include an icon, label, and a tag button within a tag, you can utilize the properties icon, label, and dismissible.
Tag with icon
Tag without icon
Tag with a tag-button
<qtm-tag label="Tag with icon" icon="home" dismissible="false"></qtm-tag>
<qtm-tag label="Tag without icon" dismissible="false"></qtm-tag>
<qtm-tag label="Tag with a tag-button" dismissible="true"></qtm-tag>
dismissible
By default, a tag possesses a qtm-tag-button that alters its appearance upon hovering. To have a tag without a tag button, simply set dismissible=false.
icon
To select an appropriate icon, please consult the Icon component documentation.
The icon can either be of string type or have one of the following type:
type IconType = {
icon: string,
classes?: string,
lib?: IconLibType,
size?: IconSizeType,
variant?: IconVariantType,
};
Tag with business icon
cosnt icon= {icon: 'applied_settings', lib:"business"}
<qtm-tag label="Tag with business icon" :icon="icon" dismissible="false"></qtm-tag>
Slot projection
Alternatively, you can use slot projection to incorporate tag buttons, icons, and typography within a tag component. This approach provides you with greater control over the tag's layout and content.
Tag
Tag with icon
Tag with icon
<qtm-tag dismissible="false">Tag</qtm-tag>
<qtm-tag dismissible="false">
<qtm-icon icon="train"></qtm-icon>
<qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag dismissible="false">
<qtm-icon icon="train"></qtm-icon>
<qtm-typography>Tag with icon</qtm-typography>
</qtm-tag>
<qtm-tag dismissible="false">
<qtm-icon icon="train"></qtm-icon>
<qtm-typography>Tag with icon</qtm-typography>
<qtm-tag-button>
<qtm-icon icon="close"></qtm-icon>
</qtm-tag-button>
</qtm-tag>
Shape
There are two border tag styles, the default shape is rounded. You can set shape attribute to rounded to make a rounded tag or to sharp to make sharp tag.
Default Tag
Rounded Tag
Sharp Tag
<qtm-tag label="Default Tag"></qtm-tag>
<qtm-tag label="Rounded Tag" shape="rounded"></qtm-tag>
<qtm-tag shape="sharp" label="Sharp Tag"></qtm-tag>
Sizes
The tag comes in 2 different sizes: small, medium. By default the size attribute has medium value.
Small Tag
Medium Tag
Small Tag
Medium Tag
<qtm-tag size="small" icon="train" label="Small Tag"></qtm-tag>
<qtm-tag size="medium" icon="train" label="Medium Tag"></qtm-tag>
<qtm-tag shape="sharp" size="small" icon="train" label="Small Tag"></qtm-tag>
<qtm-tag shape="sharp" size="medium" icon="train" label="Medium Tag"></qtm-tag>
Interactive tag
Interactive
With interactive attribute, the tags change appearance on press, hover, and click.
Tag
Tag
Tag
<qtm-tag interactive label="Tag"></qtm-tag>
<qtm-tag interactive>
<qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag interactive dismissible="false">
<qtm-typography>Tag</qtm-typography>
<qtm-tag-button>
<QtmIcon icon="close"></QtmIcon>
</qtm-tag-button>
</qtm-tag>
Selected
You can style a selected tag by adding selected attribute to this element.
Tag
Tag
Tag
<qtm-tag interactive selected label="Tag"></qtm-tag>
<qtm-tag interactive selected>
<qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag interactive selected dismissible="false">
<qtm-typography>Tag</qtm-typography>
<qtm-tag-button>
<QtmIcon icon="close"></QtmIcon>
</qtm-tag-button>
</qtm-tag>
Colors
Tags are available in 8 colors: primary, lightblue, green, orange, red, yellow, bluegrey, and purple. The default color is the primary color: color="primary".
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
Tag
Selected Tag
Disabled Tag
<!-- Primary -->
<qtm-tag interactive color="purple" label="Tag"></qtm-tag>
<qtm-tag interactive color="purple" selected label="Selected Tag"></qtm-tag>
<qtm-tag interactive color="purple" disabled label="Disabled Tag"></qtm-tag>
API
qtm-tag
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
| color | "bluegrey" | "green" | "lightblue" | "orange" | "primary" | "purple" | "red" | "yellow" | 'primary' | The color of the component. |
| disabled | boolean | false | If true, the component is disabled. |
| dismissible | boolean | true | If false, the tag does not automatically have a tag button |
| icon | string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; } | The name of the icon in the left side of a tag. Besides, its value can have type IconType if this icon is customized | |
| interactive | boolean | false | if true, the tag will appear interactive, and will raise when pressed or hovered |
| label | string | The text in a tag | |
| selected | boolean | false | If true, the tag is selected. |
| shape | "rounded" | "sharp" | 'rounded' | border radius of element. |
| size | "medium" | "small" | 'medium' | The size of element. |
| Event | Type | Description |
|---|---|---|
| clicked-tag-button-event | CustomEvent<void> | Callback fired when a tag-button of the tag component is clicked |
| clicked-tag-event | CustomEvent<void> | Callback fired when the tag is clicked |