1.0.2 • Published 6 years ago
@materialr/toolbar v1.0.2
MaterialR Toolbar
@materialr/toolbar
Material Toolbar implementation for React
Installation
$ npm install --save @materialr/toolbarDemo
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 |