Package Exports
- @rmwc/top-app-bar
- @rmwc/top-app-bar/styles
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:
- Using CSS Loader
- import '@rmwc/top-app-bar/styles';
- Or include stylesheets
- '@material/top-app-bar/dist/mdc.top-app-bar.css';
- '@material/icon-button/dist/mdc.icon-button.css';
- '@material/ripple/dist/mdc.ripple.css';
- '@rmwc/icon/icon.css';
- Using CSS Loader
- 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
Default
<\>
<TopAppBar\>
<TopAppBarRow\>
<TopAppBarSection\>
<TopAppBarTitle\>Default</TopAppBarTitle\>
</TopAppBarSection\>
</TopAppBarRow\>
</TopAppBar\>
<TopAppBarFixedAdjust />
<div style\={{ height: '100rem', padding: '1rem' }}\>Scroll Me</div\>
</\>
Fully Featured
<\>
<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
Simple
<\>
<SimpleTopAppBar
title\="test"
navigationIcon
onNav\={() \=> 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
Fixed
<\>
<TopAppBar fixed\>
<TopAppBarRow\>
<TopAppBarSection\>
<TopAppBarTitle\>Fixed</TopAppBarTitle\>
</TopAppBarSection\>
</TopAppBarRow\>
</TopAppBar\>
<TopAppBarFixedAdjust />
<div style\={{ height: '100rem', padding: '1rem' }}\>Scroll Me</div\>
</\>
Dense
<\>
<TopAppBar dense\>
<TopAppBarRow\>
<TopAppBarSection\>
<TopAppBarTitle\>Dense</TopAppBarTitle\>
</TopAppBarSection\>
</TopAppBarRow\>
</TopAppBar\>
<TopAppBarFixedAdjust />
<div style\={{ height: '100rem', padding: '1rem' }}\>Scroll Me</div\>
</\>
Short
<\>
{/\*\* 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\>
</\>
Prominent
<\>
<TopAppBar prominent\>
<TopAppBarRow\>
<TopAppBarSection\>
<TopAppBarTitle\>Prominent</TopAppBarTitle\>
</TopAppBarSection\>
</TopAppBarRow\>
</TopAppBar\>
<TopAppBarFixedAdjust />
<div style\={{ height: '100rem', padding: '1rem' }}\>Scroll Me</div\>
</\>