Dark Mode
backgroundLayer 1
Components and their props
  • Toolbar
    • fixed true/false
      Makes toolbar fixed on top and have persistent elevation
    • fixed-lastrow-only true/false
      Makes only last row of fixed toolbar anchored on top
    • waterfall true/false
      Removes fixed toolbar persistent elevation and makes it to gain elevation when a user begins to scroll down the page
    • flexible true/false
      Makes toolbar first row has flexible space
    • flexible-default-behavior true/false
      Further defines the background and title movement behavior
  • Toolbar.Row
    • no specific props
  • Toolbar.Section
    • align-start true/false
      Aligns the section to start of the toolbar row
    • align-end true/false
      Aligns the section to end of the toolbar row
    • shrink-to-fit true/false
      Makes section takes the width of its content
  • Toolbar.Icon
    • menu true/false
      Adds additional padding, intended for the left-most icon
  • Toolbar.Title
    • no specific props
Custom events
  • onChange
    Fired when toolbar's expansion ratio is changed.
Sample code
import {h, Component} from 'preact';
import Toolbar from 'preact-material-components/Toolbar';
import 'preact-material-components/Toolbar/style.css';

export default class ToolbarPage extends Component {
    return (
        <Toolbar className="toolbar">
              <Toolbar.Section align-start={true}>
                <Toolbar.Icon menu={true}>menu</Toolbar.Icon>
                  My App
              <Toolbar.Section align-end={true}>
Original documentation
This component encapsulates mdc-toolbar, you can refer to its documentation here.