mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
2f8fa45df3
* docs: update rootClassName description * docs: update rootClassName description * docs: update docs
2.9 KiB
2.9 KiB
| category | title | cover | coverDark | demo | group | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Components | Avatar | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original |
|
|
Avatars can be used to represent people or objects. It supports images, Icons, or letters.
Examples
Basic
Type
Autoset Font Size
With Badge
Avatar.Group
Calculate text style when hiding
Responsive Size
Fallback
Component Token
API
Common props ref：Common props
Avatar
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| alt | This attribute defines the alternative text describing the image | string | - | |
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
| icon | Custom icon type for an icon avatar | ReactNode | - | |
| shape | The shape of avatar | circle | square |
circle |
|
| size | The size of the avatar | number | large | small | default | { xs: number, sm: number, ...} |
default |
4.7.0 |
| src | The address of the image for an image avatar or image element | string | ReactNode | - | ReactNode: 4.8.0 |
| srcSet | A list of sources to use for different screen resolutions | string | - | |
| draggable | Whether the picture is allowed to be dragged | boolean | 'true' | 'false' |
true | |
| crossOrigin | CORS settings attributes | 'anonymous' | 'use-credentials' | '' |
- | 4.17.0 |
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
Tip: You can set
iconorchildrenas the fallback for image load error, with the priority oficon>children
Avatar.Group (4.5.0+)
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| maxCount | Max avatars to show | number | - | |
| maxPopoverPlacement | The placement of excess avatar Popover | top | bottom |
top |
|
| maxPopoverTrigger | Set the trigger of excess avatar Popover | hover | focus | click |
hover |
4.17.0 |
| maxStyle | The style of excess avatar style | CSSProperties | - | |
| size | The size of the avatar | number | large | small | default | { xs: number, sm: number, ...} |
default |
4.8.0 |
| shape | The shape of the avatar | circle | square |
circle |
5.8.0 |