The Toolbar
component can be used as a fixed App Bar
, or just a simple container
for a few actions.
linkSizing
According to the material design spec, the toolbar changes height based on the device and orientation. This can actually make things very difficult to style and adds complexity for styling. I recommend making a static $md-toolbar-height instead.
Simple Exampleslink
This will showcase some of the styling that you can apply to a toolbar and example usage of adding a navigation button or additional actions.
When the nav
prop is provided, a positioning className
will be cloned into your element,
so if your component does not accept and apply a className
prop, it might display weirdly.
If you use any component in react-md
, this should not be a problem. It will only be for custom
components.
The same happens to the actions
prop.
Fixed Toolbarslink
This example shows how you can update toolbars to be considered "App Bars" by fixing them to the top of the page. There are some positioning CSS classes provided by react-md to help with this.
linkPositioning CSS
Since the toolbar is normally used as a fixed component, some additional helper class names have been created to help position content relative to a toolbar.
linkmd-toolbar-relative
This class name will apply a margin-top
to whatever element or component it has been applied to for the current
media's toolbar height.
linkmd-toolbar-relative--prominent
This class name is similar to the md-toolbar-relative
except that it is used with prominent toolbars instead.
linkmd-btn--toolbar
This applies additional margin to buttons to center them vertically in the toolbar. This should only be used if
the buttons are not occurring in the actions
or nav
props.
linkmd-toolbar--action-left
This applies additional margin-left
to any elements to position to the left keyline in a toolbar. This should really
only be used if not using the nav
and title
props in a toolbar.
linkmd-toolbar--action-right
This applies additional margin-right
to any elements to position to the left keyline in a toolbar. This should really
only be used if not using the actions
props in a toolbar.
linkmd-title--toolbar
This applies additional styles for a title in the toolbar. This should only be used if not using the title
prop
on a toolbar.
linkmd-title--toolbar-offset
This applies additional margin-left to the title in the toolbar to match the current keyline. This should probably
only be used if not using the title
prop on a toolbar.
linkmd-title--toolbar-prominent
This applies additional styles to move the title to a more prominent section in the toolbar. This should probably
only be used if not using the title
prop on a toolbar.