Package Exports

@rmwc/top-app-bar
@rmwc/top-app-bar/README.md

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rmwc/top-app-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Top App Bar

Top App Bar acts as a container for items such as application title, navigation icon, and action items.

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

Whats the difference between the TopAppBar and Toolbar? Toolbar is technically deprecated (although it still works just fine). TopAppBar functionality continues to be worked on by the material-components-web team.

Basic Usage

<>
  <TopAppBar>
    <TopAppBarRow>
      <TopAppBarSection>
        <TopAppBarTitle>Default</TopAppBarTitle>
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

<>
  <TopAppBar>
    <TopAppBarRow>
      <TopAppBarSection alignStart>
        <TopAppBarNavigationIcon icon="menu" />
        <TopAppBarTitle>All Features</TopAppBarTitle>
      </TopAppBarSection>
      <TopAppBarSection alignEnd>
        <TopAppBarActionItem icon="favorite" />
        <TopAppBarActionItem icon="star" />
        <TopAppBarActionItem icon="mood" />
      </TopAppBarSection>
    </TopAppBarRow>
    <TopAppBarRow>
      <TopAppBarSection alignStart>
        <TopAppBarTitle>Another Row</TopAppBarTitle>
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

Simplified Usage

You can use the SimpleTopAppBar component which contains a default template already laid out for you. Specify any actions you want as an array of props

<>
  <SimpleTopAppBar
    title="test"
    navigationIcon={{ onClick: () => console.log('Navigate') }}
    actionItems={[
      {
        icon: 'file_download',
        onClick: () => console.log('Do Something')
      },
      { icon: 'print', onClick: () => console.log('Do Something') },
      { icon: 'bookmark', onClick: () => console.log('Do Something') }
    ]}
  />
  <TopAppBarFixedAdjust />

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

Variants

<>
  <TopAppBar fixed>
    <TopAppBarRow>
      <TopAppBarSection>
        <TopAppBarTitle>Fixed</TopAppBarTitle>
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

<>
  <TopAppBar dense>
    <TopAppBarRow>
      <TopAppBarSection>
        <TopAppBarTitle>Dense</TopAppBarTitle>
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

<>
  {/** Additionally you can specify shortCollapsed to have it always minimized */}
  <TopAppBar short>
    <TopAppBarRow>
      <TopAppBarSection>
        <TopAppBarNavigationIcon icon="menu" />
        <TopAppBarTitle>Short</TopAppBarTitle>
      </TopAppBarSection>
      <TopAppBarSection alignEnd>
        <TopAppBarActionItem icon="favorite" />
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

<>
  <TopAppBar prominent>
    <TopAppBarRow>
      <TopAppBarSection>
        <TopAppBarTitle>Prominent</TopAppBarTitle>
      </TopAppBarSection>
    </TopAppBarRow>
  </TopAppBar>
  <TopAppBarFixedAdjust />

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

TopAppBarRow

A row for the app bar.

TopAppBarSection

A section for the app bar.

Props

Name	Type	Description
`alignEnd`	`undefined	false
`alignStart`	`undefined	false

TopAppBarTitle

A title for the top app bar.

TopAppBarNavigationIcon

A navigation icon for the top app bar. This is an instance of the Icon component.

Props

Name	Type	Description
`icon`	`RMWC.IconPropT`	The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs.

TopAppBarActionItem

Action items for the top app bar. This is an instance of the Icon component.

Props

Name	Type	Description
`icon`	`RMWC.IconPropT`	The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs.

TopAppBarFixedAdjust

An optional component to fill the space when the TopAppBar is fixed. Place it directly after the TopAppBar.

Props

Name	Type	Description
`dense`	`undefined	false
`denseProminent`	`undefined	false
`prominent`	`undefined	false
`short`	`undefined	false

SimpleTopAppBar

A simplified syntax for creating an AppBar.

Props

Name	Type	Description
`actionItems`	`Object[]`	An array of props that will be used to create TopAppBarActionItems.
`dense`	`undefined	false
`endContent`	`React.ReactNode`	Additional content to place in the end section.
`fixed`	`undefined	false
`navigationIcon`	`Object	boolean`
`onNav`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`prominent`	`undefined	false
`scrollTarget`	`Element	null`
`short`	`undefined	false
`shortCollapsed`	`undefined	false
`startContent`	`React.ReactNode`	Additional content to place in the start section.
`title`	`React.ReactNode`	The title for the App Bar.