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