List

Show · List

List

Lists display a set of related contents

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

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

Demos

How to import

Basic Usage

Template

Layout

Grid

Responsive List

Load More

Scroll to Load

Scroll to Load Infinite Lists

Drag Sort

With Pagination

With filter

Add delete item

Single or multiple selection

Keyboard events

API reference

List

Listgrid props

List.Item

Content Guidelines

Design Tokens