NG-ZORROTag
Tag for categorizing or markup.
When To Use#
It can be used to tag by dimension or property.
When categorizing.
import { NzTagModule } from 'ng-zorro-antd/tag';Examples
Usage of basic Tag, and it could be closeable by set nzMode="closeable" property. Closeable Tag supports nzOnClose events.
Loading...
Generating a set of Tags by array, you can add and remove dynamically.
Loading...
Select your favourite topics.
Loading...
Tag components can contain an icon.
Loading...
Presets:
Custom:
We preset a series of colorful tag style for different situation usage. And you can always set it to a hex color string for custom color.
Loading...
nzMode="checkable" works like Checkbox, click it to toggle checked state.
Loading...
borderless.
Loading...
Without icon
With icon
We preset five different colors, you can set nzColor property such as success,processing,error,default and warning to indicate specific status.
Loading...
API#
nz-tag#
| Property | Description | Type | Default |
|---|---|---|---|
[nzMode] | Mode of tag | 'closeable' | 'default' | 'checkable' | 'default' |
[nzChecked] | Checked status of Tag, double binding, only works when nzMode="checkable" | boolean | false |
[nzColor] | Color of the Tag | string | - |
[nzBordered] | Whether has border style | boolean | true |
(nzOnClose) | Callback executed when tag is closed, only works when nzMode="closable" | EventEmitter<MouseEvent> | - |
(nzCheckedChange) | Checked status change call back, only works when nzMode="checkable" | EventEmitter<boolean> | - |