When to Use
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.
When to Use
Applicable to information description at the bottom of the page。
Demos
Props
| Name | Description | Type | Default |
|---|
| label | Top content with a dividing line | string | ReactNode | - |
| links | Links to content | LinkItem[] | - |
| label | The common content section | string | ReactNode | - |
| chips | Chips, only one line of content is allowed. If the content exceeds the width, the content will be automatically intercepted | ChipItem[] | - |
| onTagClick | Click the bottom label to trigger, and it will only take effect when the label 'type' is' link ' | (item: ChipItem, index: number) => void | - |
| onLinkClick | Clicking the link triggers an event that intercepts the href jump to the A tag | (item: LinkItem, index: number) => void | - |
ChipItem
| Name | Description | Type | Default |
|---|
| text | Tag Text | string | ReactNode | - |
| type | Tag Type, plainis pure display, link is clickable | 'plain' | 'link' | 'plain' |
LinkItem
| Name | Description | Type | Default |
|---|
| text | Text of links | string | - |
| href | Href of links | string | - |
CSS Variables
| Name | Description | Default |
|---|
| --background-color | background | var(--adm-color-background) |
