menu
Dark Mode
backgroundLayer 1
preact-material-components
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 {
  render(){
    return (
      <div>
        <Toolbar className="toolbar">
            <Toolbar.Row>
              <Toolbar.Section align-start={true}>
                <Toolbar.Icon menu={true}>menu</Toolbar.Icon>
                <Toolbar.Title>
                  My App
                </Toolbar.Title>
              </Toolbar.Section>
              <Toolbar.Section align-end={true}>
                <Toolbar.Icon>more_vert</Toolbar.Icon>
              </Toolbar.Section>
            </Toolbar.Row>
          </Toolbar>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-toolbar, you can refer to its documentation here.
Demo
Default