Upper Toolbar
Upper toolbar is a guidance pattern to allow designers create their own toolbars for edition with preview pages.
install | yarn add @clayui/upper-toolbar |
---|---|
version | |
use | import UpperToolbar from '@clayui/upper-toolbar'; |
Table of Contents
Warning This component has been discontinued in favor of ClayToolbar, you can get the same result.
Introduction
The Upper Toolbar components can be composed together to make all sorts of toolbar variations. Combine Upper Toolbar with other Clay components to cover a variety of use cases.
Example
import {Provider} from '@clayui/core'; import UpperToolbar from '@clayui/upper-toolbar'; import {ClayDropDownWithItems} from '@clayui/drop-down'; import Button, {ClayButtonWithIcon} from '@clayui/button'; import Icon from '@clayui/icon'; import React, {useState} from 'react'; import '@clayui/css/lib/css/atlas.css'; export default function App() { return ( <Provider spritemap="/public/icons.svg"> <div className="p-4"> <UpperToolbar> <UpperToolbar.Item className="text-left" expand> <label className="component-title">{'Foo Bar'}</label> <Icon symbol="lock" /> </UpperToolbar.Item> <UpperToolbar.Input placeholder="Search..." /> <UpperToolbar.Item> <Button.Group> <ClayButtonWithIcon displayType="secondary" onClick={() => {}} small symbol="angle-left" /> <ClayButtonWithIcon displayType="secondary" onClick={() => {}} small symbol="angle-right" /> </Button.Group> </UpperToolbar.Item> <UpperToolbar.Item> <Button displayType="secondary" onClick={() => {}}> {'Delete'} </Button> <Button className="inline-item-after" onClick={() => {}} > {'Edit'} </Button> </UpperToolbar.Item> <UpperToolbar.Item> <ClayDropDownWithItems items={[ {href: '#one', label: 'one'}, {href: '#two', label: 'two'}, { disabled: true, href: '#three', label: 'three', }, {href: '#four', label: 'four'}, ]} trigger={ <ClayButtonWithIcon displayType="unstyled" small symbol="ellipsis-v" /> } /> </UpperToolbar.Item> </UpperToolbar> </div> </Provider> ); }
Table of Contents