List

Simple List.

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Examples

Header
  • [ITEM] Racing car sprays burning fuel into crowd.
  • [ITEM] Japanese princess to wed commoner.
  • [ITEM] Australian walks 100km after outback crash.
  • [ITEM] Man charged over missing wedding girl.
  • [ITEM] Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
Header
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.

Namu Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the header and footer of list by setting header and footer property.

expand codeexpand code
  • Namu Design Title 1

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 2

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 3

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 4

    Namu Design, a design language for background applications, is refined by Ant UED Team

Basic list.

expand codeexpand code

Load more list with loadMore property.

expand codeexpand code
  • Namu Design part 0

    Namu Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • Namu Design part 1

    Namu Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo
  • Namu Design part 2

    Namu Design, a design language for background applications, is refined by Ant UED Team.
    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
    • 156
    • 156
    • 2
    logo

Set the itemLayout property to vertical to create a vertical list.

expand codeexpand code
Pagination Position:
Pagination Align:
  • Namu Design Title 1

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 2

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 3

    Namu Design, a design language for background applications, is refined by Ant UED Team
  • Namu Design Title 4

    Namu Design, a design language for background applications, is refined by Ant UED Team

List pagination can be used and set through the pagination property.

expand codeexpand code
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content

Create a grid layout by setting the grid property of List.

expand codeexpand code
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content

Responsive grid list. The size property the is as same as Layout Grid.

expand codeexpand code
No data

The example of infinite load with react-infinite-scroll-component.

expand codeexpand code

An example of infinite & virtualized list via using rc-virtual-list.

expand codeexpand code

API

Common props ref:Common props

List

PropertyDescriptionTypeDefaultVersion
borderedToggles rendering of the border around the listbooleanfalse
dataSourceDataSource array for listany[]-
footerList footer rendererReactNode-
gridThe grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
headerList header rendererReactNode-
itemLayoutThe layout of listhorizontal | verticalhorizontal
loadingShows a loading indicator while the contents of the list are being fetchedboolean | SpinProps (more)false
loadMoreShows a load more contentReactNode-
localeThe i18n text including empty textobject{emptyText: No Data}
paginationPagination config, hide it by setting it to falseboolean | objectfalse
renderItemCustomize list item when using dataSource(item) => ReactNode-
rowKeyItem's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Keykeyof T | (item: T) => React.Key"key"
sizeSize of listdefault | large | smalldefault
splitToggles rendering of the split under the list itembooleantrue

pagination

Properties for pagination.

PropertyDescriptionTypeDefault
positionThe specify the position of Paginationtop | bottom | bothbottom
alignThe specify the alignment of Paginationstart | center | endend

More about pagination, please check Pagination.

List grid props

PropertyDescriptionTypeDefaultVersion
columnThe column of gridnumber-
gutterThe spacing between gridnumber0
xs<576px column of gridnumber-
sm≥576px column of gridnumber-
md≥768px column of gridnumber-
lg≥992px column of gridnumber-
xl≥1200px column of gridnumber-
xxl≥1600px column of gridnumber-

List.Item

PropertyDescriptionTypeDefaultVersion
actionsThe actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far rightArray<ReactNode>-
extraThe extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far rightReactNode-

List.Item.Meta

PropertyDescriptionTypeDefaultVersion
avatarThe avatar of list itemReactNode-
descriptionThe description of list itemReactNode-
titleThe title of list itemReactNode-

Design Token

Component Token

Global Token

  • ImagePopover