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 content projection.
Content properties
To include an icon, label, and a tag button within a tag, you can utilize the properties icon
, label
, and dismissible
.
<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,
};
cosnt icon= {icon: 'applied_settings', lib:"business"}
<qtm-tag label="Tag with business icon" [icon]="icon" dismissible="false"></qtm-tag>
Content projection
Alternatively, you can employ content 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.
<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.
<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.
<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.
<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.
<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"
.
<!-- 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 |
---|---|---|
clickedTagButtonEvent | CustomEvent<void> | Callback fired when a tag-button of the tag component is clicked |
clickedTagEvent | CustomEvent<void> | Callback fired when the tag is clicked |