Demos
How to import
Basic Usage
You can use
size to size list. Supported values include large, default, Small. Header and Footer customized.Template
List.Item has a built-in template consisting of:
header, main, and extra. The alignment of header and main set by align properties using one of flex-start(default), flex-end, center, baseline, and stretch .Layout
Use
layout property to set list layout, one of vertical(default) or horizontal.Grid
Use
grid property to set grid layout. Use span to set the number of occupying spaces for each item and gutter for spacing between items.Responsive List
Refer to Grid for responsive dimensions.
Load More
You can use
loadMore to achieve loading state for more incoming contents.Scroll to Load
You can integrate react-infinite-scroller to implement scrolling load list. Recommended interaction could be reveal a loadmore button after three scrolling loads.
Scroll to Load Infinite Lists
You can integrate react-virtualized to implement infinite scrolling lists with virtualization to improve the performance for large amounts of data.
Drag Sort
You can integrate react-dnd to implement drag and drop sort.
If you use react-sortable-hoc, here is also an example
With Pagination
You can use Pagination in combination to achieve a paged List
With filter
You can use it by assembling Input to filter the List
Add delete item
Single or multiple selection
You can enhance the List into a list selector by combining Radio or Checkbox
Keyboard events
You can monitor the keyboard events of the corresponding keys by yourself to realize the selection of different items. As in the following example, you can use the up and down arrow keys to select different items
The custom styles involved in the Demo of the above book list example are as follows
API reference
List
| Properties | Instructions | type | Default |
|---|---|---|---|
| bordered | Toggle whether to display border | boolean | false |
| className | Class name | string | - |
| dataSource | List data source | any[] | - |
| emptyContent | Displayed content when empty | ReactNode | - |
| footer | Footer of list | ReactNode | - |
| grid | Grid configuration | Grid | - |
| header | Header of list | ReactNode | - |
| layout | Layout, one of vertical, vertical | string | vertical |
| loadMore | Loadmore button | ReactNode | - |
| loading | Toggle whether to display Spin when loading | boolean | false |
| renderItem | When using dataSource, you can customize rendering with renderItem | (item, ind) => ReactNode | - |
| size | Size, one of small, default, large | string | default |
| split | Toggle whether to display split line | boolean | true |
| style | Inline style | CSSProperties | - |
| onClick | Callback function when click an item v>=1.0.0 | function | - |
| onRightClick | Callback function when right click an item v>=1.0.0 | function | - |
Listgrid props
v>=1.7.0 Other grid properties are also supported. Refer to Grid.
| Properties | Instructions | type | Default |
|---|---|---|---|
| span | Number of grid spaces | number | - |
| gutter | Grid spacing | number | 0 |
| xs | < 576px responsive grid, a number or an object containing other attributes | number|object | - |
| sm | โฅ 576px responsive grid, a number or an object containing other properties | number|object | - |
| md | โฅ 768px responsive grid, a number or an object containing other properties | number|object | - |
| lg | โฅ 992px responsive grid, a number or an object containing other properties | number|object | - |
| xl | โฅ 1200px responsive grid, a number or an object containing other properties | number|object | - |
| xxl | โฅ 1600px responsive grid, a number or an object containing other properties | number|object | - |
List.Item
| Properties | Instructions | type | Default |
|---|---|---|---|
| align | Vertical alignment of header and main, one of flex-start, flex-end, center, baseline, stretch | string | flex-start |
| className | Class name | string | - |
| extra | Additional content | ReactNode | - |
| header | List item header content | ReactNode | - |
| main | List item body content | ReactNode | - |
| onClick | Callback function when click an item v>=1.0.0 | function | - |
| onRightClick | Callback function when right click an item v>=1.0.0 | function | - |
| style | Inline style | CSSProperties | - |
Content Guidelines
- Capitalize the first letter
- do not follow punctuation at the end
- Grammatical parallelism: mixed use of active and passive, declarative and imperative sentences
