List

yarn add @clayui/list

Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.

Stable 3.32.0 View in Lexicon CHANGELOG

QuickActionMenu
ClayList children

A list can composable by a Header, an Item and Quick Actions.

This is a header
Item 1
ItemField
Item Title and expanded
Item Text
ItemField
Item 2
Item Title and expanded
Hover this item for action menu
This is another header
Item 3
ItemField

Code Sample (expand to see it)

QuickActionMenu

Use QuickActionMenu composition inside Item for defining a QuickActionMenu.

Wrap QuickActionMenu.Item inside QuickActionMenu for defining an Item of QuickActionMenu. See the following example:

Item 1
Hover this item for quick action menu

Code Sample (expand to see it)

ClayList children

To ensure your html structure is accessible, make sure any children passed to ClayList are li elements. Both ClayList.Item and ClayListHeader are li elements.