NG-ZORROAvatar
Avatars can be used to represent people or objects. It supports images, Icons, or letters.
import { NzAvatarModule } from 'ng-zorro-antd/avatar';Examples
Three sizes and two shapes are available.
Loading...For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
Loading...
Avatar group display.
Loading...Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
Loading...0
1
2
3
4
5
6
7
8
9
Usually used for messages remind.
Loading...API#
nz-avatar#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzIcon] | The Icon type for an icon avatar, see Icon | string | - | |
[nzShape] | The shape of avatar | 'circle' | 'square' | 'circle' | ✅ |
[nzSize] | The size of the avatar | 'large' | 'small' | 'default' | number | 'default' | ✅ |
[nzGap] | Letter type unit distance between left and right sides | number | 4 | ✅ |
[nzSrc] | The address of the image for an image avatar | string | - | |
[nzSrcSet] | a list of sources to use for different screen resolutions | string | - | |
[nzAlt] | This attribute defines the alternative text describing the image | string | - | |
[nzText] | Letter type avatar | string | - | |
(nzError) | Handler when img load error, call the preventDefault method to prevent default fallback behavior | EventEmitter<Event> | - |
nz-avatar-group#
<nz-avatar-group>
<nz-avatar nzIcon="user"></nz-avatar>
...
</nz-avatar-group>