@planview/pv-toolbar

React implementation of Planview Design System Toolbar following the specification.

Go to the official documentation for more details

Setup

You can install @planview/pv-toolbar in multiple ways:

• With NPM

npm install @planview/pv-toolbar --save

• With Yarn

yarn add @planview/pv-toolbar

Usage

import * as React from 'react'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonPrimary,
    ToolbarButtonDestructive,
    ToolbarSectionLeft,
    ToolbarSectionRight,
    ToolbarSeparator
} from '@planview/pv-toolbar'

function MyToolbarImplementation {
    return (
       <Toolbar>
            <ToolbarSectionLeft>
                <ToolbarButtonEmpty
                    onClick={() => setCurrentValue('hit button filter')}
                    icon={<Filter />}
                    tooltip="Filter"
                    aria-label="Filter"
                />
                <ToolbarSeparator />
                <ToolbarButtonDestructive
                    icon={<Activity />}
                    onClick={() => {
                        setCurrentValue('hit button activity')
                    }}
                >
                    Activity
                </ToolbarButtonDestructive>
            </ToolbarSectionLeft>
            <ToolbarSectionRight>
                <ToolbarButtonPrimary
                    onClick={() => setCurrentValue('hit button help')}
                    tooltip="Help"
                    displayOn="desktop"
                    icon={<Help />}
                />
                <ToolbarButtonEmpty
                    onClick={() => setCurrentValue('hit button resize')}
                    tooltip="Resize"
                    displayOn="desktop"
                    icon={<ResizeFull />}
                />
            </ToolbarSectionRight>
        </Toolbar>
    )
)