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';`

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

Open Sandbox

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>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Introduction
Example