List
Generic list.
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.
Generic list.
When to Use
Carry text, lists, pictures, paragraphs, etc. cleanly and efficiently in the form of a list.
Demos
List
Props
| Name | Description | Type | Default |
|---|---|---|---|
| header | The title of list. | ReactNode | - |
| mode | Support two modes: default and card. | 'default' | 'card' | 'default' |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --active-background-color | The background color when clicked. | var(--adm-border-color) |
| --align-items | The align-item of the list item | center |
| --border-bottom | Border style of the list bottom | solid 1px var(--adm-border-color) |
| --border-inner | Border style of the list item bottom | solid 1px var(--adm-border-color) |
| --border-top | Border style of the list top | solid 1px var(--adm-border-color) |
| --extra-max-width | The max width of the extra part | 70% |
| --font-size | The font-size of the list body | 17px |
| --header-font-size | The font-size of the header | 15px |
| --padding-left | The padding-left of list item and header | 12px |
| --padding-right | The padding-right of list item and header | 12px |
| --prefix-padding-right | The padding-right of the prefix part | 12px |
| --prefix-width | Width of the prefix part. | auto |
Ref
| Name | Description | Type |
|---|---|---|
| nativeElement | Native div element | HTMLDivElement | null |
List.Item
Props
| Name | Description | Type | Default |
|---|---|---|---|
| arrowIcon | Whether to show the arrow icon on the right side, also supports passing ReactNode to customize the icon. | boolean | ReactNode | same as clickable |
| children | The main content area in the middle of the list item. | ReactNode | - |
| clickable | Whether to show click effect. | boolean | Defaults to true when the onClick prop is present, otherwise defaults to false |
| description | The description area in the lower middle of the list item. | ReactNode | - |
| disabled | Is the list item disabled | boolean | false |
| extra | The right area of the list item. | ReactNode | - |
| onClick | The click event of the list item. When the onClick property is set, the list item will have click effect. | (e: React.MouseEvent) => void | - |
| prefix | The left area of the list item. | ReactNode | - |
| title | The title area in the upper middle of the list item. | ReactNode | - |
CSS Variables
Support following css variables in List: --prefix-width, --active-background-color and --align-items
FAQ
Whether to support virtualized list?
List will not support virtualized list, you can implement it via using react-virtualized.
Whether to support drag and drop the sorting?
List will not support Drag and drop the sorting, you can implement it via using react-beautiful-dnd.