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

Simple list

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.

Basic list

Basic list.

Load more list with loadMore property.

Vertical

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

Pagination Settings

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

Grid

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

Responsive grid list

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

Scrolling loaded

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

virtual list

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

API

Common props ref：Common props

List

Property	Description	Type	Default
bordered	Toggles rendering of the border around the list	boolean	false
dataSource	DataSource array for list	any[]	-
footer	List footer renderer	ReactNode	-
grid	The grid type of list. You can set grid to something like {gutter: 16, column: 4}	object	-
header	List header renderer	ReactNode	-
itemLayout	The layout of list	`horizontal` \| `vertical`	`horizontal`
loading	Shows a loading indicator while the contents of the list are being fetched	boolean \| SpinProps (more)	false
loadMore	Shows a load more content	ReactNode	-
locale	The i18n text including empty text	object	{emptyText: `No Data`}
pagination	Pagination config, hide it by setting it to false	boolean \| object	false
renderItem	Customize list item when using `dataSource`	(item) => ReactNode	-
rowKey	Item'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.Key`	`keyof` T \| (item: T) => `React.Key`	`"key"`
size	Size of list	`default` \| `large` \| `small`	`default`
split	Toggles rendering of the split under the list item	boolean	true

pagination

Properties for pagination.

Property	Description	Type	Default
position	The specify the position of `Pagination`	`top` \| `bottom` \| `both`	`bottom`
align	The specify the alignment of `Pagination`	`start` \| `center` \| `end`	`end`

More about pagination, please check Pagination.

List grid props

Property	Description	Type	Default
column	The column of grid	number	-
gutter	The spacing between grid	number	0
xs	`<576px` column of grid	number	-
sm	`≥576px` column of grid	number	-
md	`≥768px` column of grid	number	-
lg	`≥992px` column of grid	number	-
xl	`≥1200px` column of grid	number	-
xxl	`≥1600px` column of grid	number	-

List.Item

Property	Description	Type	Default	Version
actions	The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right	Array<ReactNode>	-
extra	The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right	ReactNode	-

List.Item.Meta

Property	Description	Type	Default
avatar	The avatar of list item	ReactNode	-
description	The description of list item	ReactNode	-
title	The title of list item	ReactNode	-

Design Token

Component Token

Global Token

API

Common props ref：Common props

List

Property	Description	Type	Default
bordered	Toggles rendering of the border around the list	boolean	false
dataSource	DataSource array for list	any[]	-
footer	List footer renderer	ReactNode	-
grid	The grid type of list. You can set grid to something like {gutter: 16, column: 4}	object	-
header	List header renderer	ReactNode	-
itemLayout	The layout of list	`horizontal` \| `vertical`	`horizontal`
loading	Shows a loading indicator while the contents of the list are being fetched	boolean \| SpinProps (more)	false
loadMore	Shows a load more content	ReactNode	-
locale	The i18n text including empty text	object	{emptyText: `No Data`}
pagination	Pagination config, hide it by setting it to false	boolean \| object	false
renderItem	Customize list item when using `dataSource`	(item) => ReactNode	-
rowKey	Item'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.Key`	`keyof` T \| (item: T) => `React.Key`	`"key"`
size	Size of list	`default` \| `large` \| `small`	`default`
split	Toggles rendering of the split under the list item	boolean	true

pagination

Properties for pagination.

Property	Description	Type	Default
position	The specify the position of `Pagination`	`top` \| `bottom` \| `both`	`bottom`
align	The specify the alignment of `Pagination`	`start` \| `center` \| `end`	`end`

More about pagination, please check Pagination.

List grid props

Property	Description	Type	Default
column	The column of grid	number	-
gutter	The spacing between grid	number	0
xs	`<576px` column of grid	number	-
sm	`≥576px` column of grid	number	-
md	`≥768px` column of grid	number	-
lg	`≥992px` column of grid	number	-
xl	`≥1200px` column of grid	number	-
xxl	`≥1600px` column of grid	number	-

List.Item

Property	Description	Type	Default	Version
actions	The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right	Array<ReactNode>	-
extra	The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right	ReactNode	-

List.Item.Meta

Property	Description	Type	Default
avatar	The avatar of list item	ReactNode	-
description	The description of list item	ReactNode	-
title	The title of list item	ReactNode	-

Namu Design

List

Namu Design

List

When To Use

Examples

API

List

List grid props

List.Item

List.Item.Meta

Design Token

Component Token

Global Token

When To Use

Examples

API

List

List grid props

List.Item

List.Item.Meta

Design Token

Component Token

Global Token

Namu Design Title 1

Namu Design Title 2

Namu Design Title 3

Namu Design Title 4

Namu Design part 0

Namu Design part 1

Namu Design part 2

Namu Design Title 1

Namu Design Title 2

Namu Design Title 3

Namu Design Title 4

ListChangelog

ListChangelog

When To Use

Examples

API

List

pagination

List grid props

List.Item

List.Item.Meta

Design Token

Component Token

Global Token

When To Use

Examples

API

List

pagination

List grid props

List.Item

List.Item.Meta

Design Token

Component Token

Global Token

List

List