Avatar
Avatar
Importimport { Avatar } from 'antd'; |
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | medium | small | { xs: number, sm: number, ...} | medium | 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
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| max | Set maximum display related configurations | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
Deprecated, please use max={{ count: number }} | number | - | ||
Deprecated, please use max={{ popover: PopoverProps }} | top | bottom | top | ||
Deprecated, please use max={{ popover: PopoverProps }} | hover | focus | click | hover | ||
Deprecated, please use max={{ style: CSSProperties }} | CSSProperties | - | ||
| size | The size of the avatar | number | large | medium | small | { xs: number, sm: number, ...} | medium | 4.8.0 |
| shape | The shape of the avatar | circle | square | circle | 5.8.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| containerSize | Size of Avatar | number | 32 |
| containerSizeLG | Size of large Avatar | number | 40 |
| containerSizeSM | Size of small Avatar | number | 24 |
| groupBorderColor | Border color of avatars in a group | string | #ffffff |
| groupOverlapping | Overlapping of avatars in a group | number | -8 |
| groupSpace | Spacing between avatars in a group | number | 4 |
| iconFontSize | Font size of Avatar icon | number | 18 |
| iconFontSizeLG | Font size of large Avatar icon | string | number | 24 |
| iconFontSizeSM | Font size of small Avatar icon | number | 14 |
| textFontSize | Font size of Avatar | number | 14 |
| textFontSizeLG | Font size of large Avatar | number | 14 |
| textFontSizeSM | Font size of small Avatar | number | 14 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextPlaceholder | Control the color of placeholder text. | string | rgba(0,0,0,0.25) |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
