List
View in LexiconLists are a visual representation of a dataset, based on groups of related content, that is organized vertically.
| install | yarn add @clayui/list |
|---|---|
| version |  |
| use | import List from '@clayui/list'; |
Table of Contents
A list can composable by a Header, an Item and Quick Actions.
import {Provider} from '@clayui/core';
import List from '@clayui/list';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<List>
<List.Header>This is a header</List.Header>
<List.Item flex>
<List.ItemField>Item 1</List.ItemField>
<List.ItemField>ItemField</List.ItemField>
<List.ItemField expand>
<List.ItemTitle>
Item Title and expanded
</List.ItemTitle>
<List.ItemText>Item Text</List.ItemText>
</List.ItemField>
<List.ItemField>ItemField</List.ItemField>
</List.Item>
<List.Item flex>
<List.ItemField>Item 2</List.ItemField>
<List.ItemField expand>
<List.ItemTitle>
Item Title and expanded
</List.ItemTitle>
<List.ItemText>
Hover this item for action menu
</List.ItemText>
</List.ItemField>
<List.ItemField>
<List.QuickActionMenu>
<List.QuickActionMenu.Item
aria-label="Delete"
title="Delete"
onClick={() => alert('Clicked the trash!')}
symbol="trash"
/>
<List.QuickActionMenu.Item
aria-label="Settings"
title="Settings"
onClick={() => alert('Clicked the cog!')}
symbol="cog"
/>
</List.QuickActionMenu>
</List.ItemField>
</List.Item>
<List.Header>This is another header</List.Header>
<List.Item flex>
<List.ItemField>Item 3</List.ItemField>
<List.ItemField>ItemField</List.ItemField>
</List.Item>
</List>
</div>
</Provider>
);
}
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:
import {Provider} from '@clayui/core';
import List from '@clayui/list';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<List showQuickActionsOnHover>
<List.Item flex>
<List.ItemField expand>
<List.ItemTitle>Item 1</List.ItemTitle>
<List.ItemText>
Hover this item for quick action menu
</List.ItemText>
</List.ItemField>
<List.ItemField>
<List.QuickActionMenu>
<List.QuickActionMenu.Item
aria-label="Delete"
title="Delete"
onClick={() => alert('Clicked the trash!')}
symbol="trash"
/>
<List.QuickActionMenu.Item
aria-label="Settings"
title="Settings"
onClick={() => alert('Clicked the cog!')}
symbol="cog"
/>
</List.QuickActionMenu>
</List.ItemField>
</List.Item>
</List>
</div>
</Provider>
);
}
List children
To ensure your html structure is accessible, make sure any children passed to List are li elements. Both List.Item and ClayListHeader are li elements.
Table of Contents