@clayui/management-toolbar

ClayManagementToolbar component

Usage no npm install needed!

<script type="module">
  import clayuiManagementToolbar from 'https://cdn.skypack.dev/@clayui/management-toolbar';
</script>

README

title: 'Management Toolbar' description: 'Management toolbar is an extension of Toolbar. It is a combination of different components, including filters, orders, search, visualization select, and other actions that let users manage a dataset.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/management-bar/' packageNpm: '@clayui/management-toolbar'

import { ManagementToolbar, MinimalManagementToolbar, ResultsBar, } from '$packages/clay-management-toolbar/docs/index';

Composing

With ClayManagementToolbar you can create a variety of Management Toolbar variations, use ClayManagementToolbar component as the outside container, ClayManagementToolbar.ItemList for creating groups of items and ClayManagementToolbar.Item for create items inside groups. Use expand property on ClayManagementToolbar.ItemList for expanding the item list.

We recommend that you review the use cases in the Storybook. Also, check our List Page Template on Storybook.

Use ClayManagementToolbar.Search for creating a Search input inside the management toolbar.


Aggregating ClayManagementToolbar.ItemList and ClayManagementToolbar.ResultsBar you can reach this result:

Results Bar

Use ClayManagementToolbar.ResultsBar for creating a results bar and ClayManagementToolbar.ResultsBarItem for defining items inside Results Bar.