Toolbar component for React

July 31, 2019 · View on GitHub

import React from "react"
import { Toolbar } from "polythene-react"

<Toolbar>...</Toolbar>

A Toolbar content consists of a list of elements. Some possibilities:

[title, icon]
[icon, title]
[icon, title + space, icon, icon]
[icon, title + space, action link]

To show a Toolbar with a label and 3 icon buttons:

import { Toolbar, ToolbarTitle, IconButton } from "polythene-react"

const iconMenuSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
const iconRefreshSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
const iconAddSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

const ToolbarButton = ({ svg }) =>
  <IconButton icon={{ svg }} />

<Toolbar>
  <ToolbarButton svg={{ content: iconMenuSVG }} />
  <ToolbarTitle>Title</ToolbarTitle>
  <ToolbarButton svg={{ content: iconRefreshSVG }} />
  <ToolbarButton svg={{ content: iconAddSVG }} />
</Toolbar>

Appearance

Title

A ToolbarTitle can be inserted as Toolbar element as shown above.

A title can be indented or centered:

<ToolbarTitle indent>Title</ToolbarTitle>

Preventing an unbalanced centered title

When the Toolbar contains one button at the left, and the title is centered, the result will look unbalanced because the title will be centered to the remaining space (at the right to the button).

Use a dummy placeholder at the right to bring balance. For instance with an empty inactive IconButton:

<Toolbar>
  <IconButton><Icon svg={{ content: iconMenuSVG }} /></IconButton>
  <ToolbarTitle center>Title</ToolbarTitle>
  <IconButton inactive><Icon /></IconButton>
</Toolbar>

Action links

Use class pe-action:

<Toolbar>
  <ToolbarTitle center>Title</ToolbarTitle>
  <a className="pe-action" href="...">Save</a>
</Toolbar>

Shadow

import { Toolbar } from "polythene-react"

<Toolbar shadowDepth={1}>
  ...
</Toolbar>

Styling

Below are examples how to change the Toolbar appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { ToolbarCSS } from "polythene-css"

ToolbarCSS.addStyle(".themed-toolbar", {
  color_dark_background: "#00c853"
})

<Toolbar className="themed-toolbar">...</Toolbar>

CSS

Change CSS using the Toolbar CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/toolbar"

Style

Some style attributes can be set using option style. For example:

<Toolbar 
  style={{
    backgroundColor: "#EF6C00",
    color: "#fff",
    height: "72px"
  }}
/>

RTL (right-to-left) support

The direction of Toolbar content is reversed when the Toolbar is contained within an element that either:

has attribute dir="rtl"
has className pe-rtl

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

Use tone: "dark" to render light on dark
Use tone: "light" to locally render normally when dark tone is set