List
List supports two kinds of modes (default and card).
<List>
<List.Item>content</List.Item>
</List><List>
<List.Item>content</List.Item>
</List>Example
Basic usage of List component.
Default mode
Content 1
Content 2
Content 3
Content 4
Card mode
With icon and disabled state
Voice item
Info item
Users list
API
List
| Properties | Description | Type | Default |
|---|---|---|---|
| mode | Support two modes: default and card. | 'default' | 'card' | 'default' |
List.Item
| Properties | Description | Type | Default |
|---|---|---|---|
| title | The title area in the upper middle of the list item. | ReactNode | - |
| children | The main content area in the middle of the list item. | ReactNode | - |
| description | The description area in the lower middle of the list item. | ReactNode | - |
| prefix | The left area of the list item. | ReactNode | - |
| extra | The right area of the list item. | ReactNode | - |
| clickable | Whether the list item could be clickable. | boolean | Defaults to true when the onClick prop is present, otherwise defaults to false |
| arrow | Whether to show the arrow icon on the right side, also supports passing ReactNode to customize the icon. | boolean | ReactNode | same as clickable |
| disabled | Whether the list item could be disabled. | boolean | false |
| onClick | The click event of the list item. When the onClick property is passed on, the list item will display click effect. | (e: React.MouseEvent) => void | - |