Avatar
Used to represent a user or thing.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Used to represent a user or thing.
When to Use
It is necessary to show the characteristics of people or things more intuitively.
Demos
Avatar
Props
| Name | Description | Type | Default |
|---|---|---|---|
| fallback | The fallback placeholder. | ReactNode | The default fallback image. |
| fit | The fill mode of the image | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | 'cover' |
| src | The address of avatar. | string | - |
In addition, the following props of Image are also supported: alt lazy onClick onError onLoad.
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --border-radius | The border radius. | 4px | --adm-avatar-border-radius |
| --size | The width and height of avatar. | 44px | --adm-avatar-size |