List

Basic list display, which can carry text, lists, pictures, paragraphs.

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

Ceebee UI 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

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.

Drag sorting

By using components, we can integrate List with dnd-kit to implement drag sorting function.

Drag sorting with handler

Alternatively you can implement drag sorting with handler using dnd-kit.

Grid Drag sorting

By using custom components, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

Grid Drag sorting with handler

By using custom components and drag handles, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

virtual list

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

API

List, List.Item, and List.Item.Meta are exported from @ceebee/ui/client.

List

Property	Description	Type	Default	Version
`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: T, index: number) => 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

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

List grid props

Property	Description	Type	Default	Version
`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`	`-`	—
`xxxl`	≥1920px column of grid	`number`	`-`	6.3.0

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>`	`-`	—
`classNames`	Semantic structure className	`Record<actions \| extra, string>`	`-`	5.18.0
`extra`	The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right	`ReactNode`	`-`	—
`styles`	Semantic DOM style	`Record<actions \| extra, CSSProperties>`	`-`	5.18.0

List.Item.Meta

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