@rmwc/toolbar NPM

Toolbars

Toolbar actions appear above the view affected by their actions.

Module @rmwc/toolbar
Import styles:
- import '@material/toolbar/dist/mdc.toolbar.css'
MDC Docs: https://material.io/develop/web/components/toolbar/

Attention Toolbars are technically deprecated by material-components-web (although they continue to get updates?) but they remain useful until TopAppBar can catch up and contain all of the same behaviors.

<Toolbar>
  <ToolbarRow>
    <ToolbarTitle>Toolbar</ToolbarTitle>
  </ToolbarRow>
</Toolbar>

<Toolbar>
  <ToolbarRow>
    <ToolbarSection alignStart>
      <ToolbarMenuIcon icon="menu" />
      <ToolbarTitle>Toolbar</ToolbarTitle>
    </ToolbarSection>
    <ToolbarSection alignEnd>
      <ToolbarIcon icon="save" />
      <ToolbarIcon icon="print" />
    </ToolbarSection>
  </ToolbarRow>
</Toolbar>

<Toolbar>
  <ToolbarRow>
    <ToolbarTitle>Toolbar</ToolbarTitle>
  </ToolbarRow>
  <ToolbarRow>
    <ToolbarTitle>Second Row</ToolbarTitle>
  </ToolbarRow>
</Toolbar>

Fixed

When using the fixed prop, you can optionally add the ToolbarFixedAdjust component to fill in the appropriate space.

<>
  <Toolbar fixed>
    <ToolbarRow>
      <ToolbarTitle>Toolbar</ToolbarTitle>
    </ToolbarRow>
  </Toolbar>
  <ToolbarFixedAdjust />

  <div style={{ height: '100rem', padding: '1rem' }}>Scroll Me</div>
</>

<>
  <Toolbar fixed fixedLastrowOnly>
    <ToolbarRow>
      <ToolbarTitle>Toolbar</ToolbarTitle>
    </ToolbarRow>
    <ToolbarRow>
      <ToolbarTitle>Another Row</ToolbarTitle>
    </ToolbarRow>
  </Toolbar>
  <ToolbarFixedAdjust />

  <div style={{ height: '100rem', padding: '1rem' }}>Scroll Me</div>
</>

Flexible

<>
  <Toolbar fixed flexible>
    <ToolbarRow>
      <ToolbarTitle>Toolbar</ToolbarTitle>
    </ToolbarRow>
  </Toolbar>
  <ToolbarFixedAdjust />

  <div style={{ height: '100rem', padding: '1rem' }}>Scroll Me</div>
</>

Toolbar

Props

Name	Type	Description
`fixed`	`undefined \\| false \\| true`	Makes the toolbar fixed
`fixedLastrowOnly`	`undefined \\| false \\| true`	Fixes the last row of a multi-row toolbar
`flexible`	`undefined \\| false \\| true`	makes the toolbar flexible
`flexibleDefaultBehavior`	`undefined \\| false \\| true`	further defines the background and title movement behavior, use in conjunction with flexible.
`waterfall`	`undefined \\| false \\| true`	Adds a waterfall effect on scroll

ToolbarRow

A Toolbar row

ToolbarSection

A section of the Toolbar

Props

Name	Type	Description
`alignEnd`	`undefined \\| false \\| true`	Aligns the ToolbarSection at the end.
`alignStart`	`undefined \\| false \\| true`	Aligns the ToolbarSection at the start.
`shrinkToFit`	`undefined \\| false \\| true`	Makes the ToolbarSection shrink to fit.