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

List

PropertiesInstructionstypeDefault
borderedToggle whether to display borderbooleanfalse
classNameClass namestring-
dataSourceList data sourceany[]-
emptyContentDisplayed content when emptyReactNode-
footerFooter of listReactNode-
gridGrid configurationGrid-
headerHeader of listReactNode-
layoutLayout, one of vertical, verticalstringvertical
loadMoreLoadmore buttonReactNode-
loadingToggle whether to display Spin when loadingbooleanfalse
renderItemWhen using dataSource, you can customize rendering with renderItem(item, ind) => ReactNode-
sizeSize, one of small, default, largestringdefault
splitToggle whether to display split linebooleantrue
styleInline styleCSSProperties-
onClickCallback function when click an item v>=1.0.0function-
onRightClickCallback function when right click an item v>=1.0.0function-

Listgrid props

v>=1.7.0 Other grid properties are also supported. Refer to Grid.
PropertiesInstructionstypeDefault
spanNumber of grid spacesnumber-
gutterGrid spacingnumber0
xs< 576px responsive grid, a number or an object containing other attributesnumber|object-
sm≥ 576px responsive grid, a number or an object containing other propertiesnumber|object-
md≥ 768px responsive grid, a number or an object containing other propertiesnumber|object-
lg≥ 992px responsive grid, a number or an object containing other propertiesnumber|object-
xl≥ 1200px responsive grid, a number or an object containing other propertiesnumber|object-
xxl≥ 1600px responsive grid, a number or an object containing other propertiesnumber|object-

List.Item

PropertiesInstructionstypeDefault
alignVertical alignment of header and main, one of flex-start, flex-end, center, baseline, stretchstringflex-start
classNameClass namestring-
extraAdditional contentReactNode-
headerList item header contentReactNode-
mainList item body contentReactNode-
onClickCallback function when click an item v>=1.0.0function-
onRightClickCallback function when right click an item v>=1.0.0function-
styleInline styleCSSProperties-

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

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED