• TopAppBar
  • no specific props
• TopAppBar.Row
  • no specific props
• TopAppBar.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
• TopAppBar.Icon
  • no specific props
• TopAppBar.Title
  • no specific props

• onNav
  Emits when the navigation icon is clicked.

import {h, Component} from 'preact';
import TopAppBar from 'preact-material-components/TopAppBar';
import 'preact-material-components/TopAppBar/style.css';

export default class ToolbarPage extends Component {
  render(){
    return (
      <div>
        <TopAppBar className="topappbar">
            <TopAppBar.Row>
              <TopAppBar.Section align-start>
                <TopAppBar.Icon navigation>menu</TopAppBar.Icon>
                <TopAppBar.Title>
                  My App
                </TopAppBar.Title>
              </TopAppBar.Section>
              <TopAppBar.Section align-end>
                <TopAppBar.Icon>more_vert</TopAppBar.Icon>
              </TopAppBar.Section>
            </TopAppBar.Row>
          </TopAppBar>
      </div>
    );
  }
}