@clayui/list

ClayList component

Usage no npm install needed!

<script type="module">
  import clayuiList from 'https://cdn.skypack.dev/@clayui/list';
</script>

README

title: 'List' description: 'Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/list/' packageNpm: '@clayui/list'

import {List, ListQuickActionsMenu} from '$packages/clay-list/docs/index';

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

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:

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.