MaterialR Toolbar

@materialr/toolbar

Material Toolbar implementation for React

Installation

$ npm install --save @materialr/toolbar

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Default export

import Toolbar from '@materialr/toolbar';

Props

| Prop | Type | Required | Default | Description | | ------------------ | -------------- | -------- | --------- | ------------------------------------------------------ | | children | node | Yes | N/A | The child elements to render inside the list | | className | string | No | undefined | Additional classNames to add | | fixed | bool | No | false | Whether the toolbar s fixed at the top of the screen | | fixedLastRowOnly | bool | No | false | Whether the last row is fixed at the top of the screen | | flexible | enum (1/2/3/4) | No | 1 | The amount of rows that the flexible toolbar spans | | waterfall | bool | No | false | Whether this is a waterfall toolbar |

Named exports

import { ToolbarIcon } from '@materialr/toolbar';

Props

| Prop | Type | Required | Default | Description | | ----------- | ------ | -------- | --------- | ---------------------------------------- | | className | string | No | undefined | Additional classNames to add | | icon | string | Yes | N/A | The material icon to render | | menuIcon | bool | No | false | Whether the icon is the main menu icon | | onClick | func | No | undefined | The click handler for the icon | | title | string | Yes | N/A | The title attribute for the icon element |

import { ToolbarRow } from '@materialr/toolbar';

Props

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ----------------------------- | | children | node | Yes | N/A | The children to render within | | className | string | No | undefined | Additional classNames to add |

import { ToolbarSection } from '@materialr/toolbar';

Props

| Prop | Type | Required | Default | Description | | ------------- | ----------- | -------- | --------- | --------------------------------------------------------------- | | alignEnd | bool | No | false | Whether to align the section contents to the end | | alignStart | bool | No | false | Whether to align the section contents to the start | | children | node | Yes | N/A | The children to render within | | className | string | No | undefined | Additional classNames to add | | shrinkToFit | bool | No | false | Whether the section should shrink to make other sections larger |

import { ToolbarTitle } from '@materialr/toolbar';

Props

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ----------------------------- | | children | node | Yes | N/A | The children to render within | | className | string | No | undefined | Additional classNames to add |