Toolbar

A toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.

install	yarn add @clayui/toolbar
version
use	`import TimePicker from '@clayui/toolbar';`

Introduction

A toolbar organizes actions into a horizontal bar that is responsive. Its height changes to accommodate the height of the elements it contains. The toolbar always maintains the vertical alignment.

Open Sandbox

import {Provider} from '@clayui/core';
import Toolbar from '@clayui/toolbar';
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">
				<Toolbar>
					<Toolbar.Nav>
						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Previous"
								disabled
								href="#"
								symbol="angle-left"
								title="Previous"
							/>
						</Toolbar.Item>

						<Toolbar.Item expand>
							<Toolbar.Section>
								<span className="text-truncate-inline">
									<span className="text-truncate">
										{
											'Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424'
										}
									</span>
								</span>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Link href="#">
								{'Component Link'}
							</Toolbar.Link>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Next"
								title="Next"
								disabled
								href="#"
								symbol="angle-right"
							/>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Action
								aria-label="Close"
								title="Close"
								disabled
								href="#"
								symbol="times"
							/>
						</Toolbar.Item>
					</Toolbar.Nav>
				</Toolbar>
			</div>
		</Provider>
	);
}

Composing

Toolbar.Nav is the highest level wrapper to be used inside the Toolbar to wrap all the content inside.

Toolbar.Item represents a Toolbar child item, a list item that is supposed to wrap around any of the other low-level components.

Toolbar.Section is a wrapper to be used inside the Toolbar.Item that makes the contents it wraps display inline.

Toolbar.Action is used when you want a clickable icon to add an action in the Toolbar.

Toolbar.Input, Toolbar.Label and Toolbar.Link are essentially a wrapper around their respective Clay components with some specifics related to Toolbar.

Open Sandbox

import {Provider} from '@clayui/core';
import Toolbar from '@clayui/toolbar';
import {ClayInput} from '@clayui/form';
import Icon from '@clayui/icon';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import Button, {ClayButtonWithIcon} from '@clayui/button';
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">
				<Toolbar>
					<Toolbar.Nav>
						<Toolbar.Item className="text-left" expand>
							<Toolbar.Section>
								<label className="component-title">
									{'Foo Bar'}
								</label>

								<Icon symbol="lock" />
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<ClayInput.Group>
								<ClayInput.GroupItem>
									<ClayInput
										className="form-control-inline"
										placeholder="Search..."
									/>
								</ClayInput.GroupItem>
							</ClayInput.Group>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Section>
								<Button.Group>
									<ClayButtonWithIcon
										aria-label="Previous"
										title="Previous"
										displayType="secondary"
										onClick={() => {}}
										small
										symbol="angle-left"
									/>

									<ClayButtonWithIcon
										aria-label="Next"
										title="Next"
										displayType="secondary"
										onClick={() => {}}
										small
										symbol="angle-right"
									/>
								</Button.Group>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<Toolbar.Section>
								<Button
									displayType="secondary"
									onClick={() => {}}
								>
									{'Delete'}
								</Button>

								<Button
									className="inline-item-after"
									onClick={() => {}}
								>
									{'Edit'}
								</Button>
							</Toolbar.Section>
						</Toolbar.Item>

						<Toolbar.Item>
							<ClayDropDownWithItems
								items={[
									{href: '#one', label: 'one'},
									{href: '#two', label: 'two'},
									{
										disabled: true,
										href: '#three',
										label: 'three',
									},
									{href: '#four', label: 'four'},
								]}
								trigger={
									<ClayButtonWithIcon
										aria-label="More Actions"
										title="More Actions"
										displayType="unstyled"
										small
										symbol="ellipsis-v"
									/>
								}
							/>
						</Toolbar.Item>
					</Toolbar.Nav>
				</Toolbar>
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Introduction
Composing