@element-public/react-top-app-bar NPM

TopAppBar

Description

The top application bar display information and actions relating to the current screen. It can contain branding, screen titles, navigation, and actions.

See live demos on storybook

Storybook TopAppBar Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-top-app-bar @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

TopAppBar is normally placed at the top of a page or site to display things such as the title, subtitle, or other items that a menu would hold. Using TopAppBar is a good way to keep the page organized and easy to navigate. It is easy to use and understand making it very user-friendly.

Top App Bar Props

Name	Type	Default	Required	Description
className	string	undefined	false	The css class name to be passed through to the component markup.
contextual	boolean	false	false	The top app bar will styled contextually and displaying `contextualActions`. A top app bar can transform into a contextual top app bar to provide contextual actions to selected items. For example, if a photo is selected, phot editing actions can be displayed.
contextualTheme	string	'dark'	false	Visual theme of the contextual background, dark or lightAccepted Values: dark, light
dense	boolean	false	false	The TopAppBar will have reduced padding.
elevated	boolean	false	false	Whether or not the top app bar is elevated. By default it will be elevated on scroll only.
fixed	boolean	true	false	The TopAppBar will remain on screen.
logoSize	string	'small'	false	Size of the logo. Use `small` for 40x40, `medium` for 80x40, `large` for 130x40 images and `lgSquare` for 48x48.Accepted Values: small, medium, large, lgSquare
logoTitleWrapper	React.ReactNode\|function	undefined	false	Optionally wrap both the logo and title content. This is intended for situations where a combined clickable logo & title would be used to go to the home/root of a website or application. Note: any interaction styling and accessibility concerns need to be handled by the wrapper itself (which is recommended for accessibility).
prominent	boolean	false	false	The TopAppBar will have increased padding.
scrollTarget	React.ReactNode\|string	'window'	false	Set a custom scroll target for the top app bar, defaults to window.
subtitle	string\|React.ReactNode	null	false	Subtitle text for the Top App Bar. Cannot be used with children.
tabActions	boolean	false	false	Indicates whether the actions are tabs. Only necessary if not using Element Tabs. Will apply styles automatically for Element Tabs. Custom CSS may be necessary if not using Element Tabs.
themeColor	string	'primary'	false	Background theme color. Accepts one of 'primary', 'secondary', or 'surface'.Accepted Values: primary, secondary, surface, linear-gradient-white-to-bottom, linear-gradient-white-to-top, linear-gradient-black-to-bottom, linear-gradient-black-to-top, linear-gradient-primary-dark-to-bottom, linear-gradient-primary-dark-to-top, linear-gradient-primary-darker-to-bottom, linear-gradient-primary-darker-to-top, linear-gradient-primary-to-bottom, linear-gradient-primary-to-top, linear-gradient-secondary-dark-to-bottom, linear-gradient-secondary-dark-to-top, linear-gradient-secondary-darker-to-bottom, linear-gradient-secondary-darker-to-top, linear-gradient-secondary-to-bottom, linear-gradient-secondary-to-top
title	string\|React.ReactNode	null	false	Title text for the Top App Bar. Cannot be used with children.
useContentMaxWidth	boolean	false	false	If true the top app bar's content will have a max width according to your theme's breakpoints.

Top App Bar Render Props

Name	Type	Default	Required	Description
actions	React.ReactNode	null	false	Expects one or more ActionItems, will accept any valid components or markup.
children	React.ReactNode	undefined	false	Content to be rendered in the center of TopAppBar. Accepts any valid markup. Cannot be used with Title and Subtitle.
logo	React.ReactNode	null	false	Optional logo. Expects an image but accepts any valid markup.
navigation	React.ReactNode	null	false	Navigation icon to trigger a menu. Expects an IconButton but accepts any valid markup.
prominentTabs	React.ReactNode	null	false	Tabs to be displayed in the lower slot of the top app bar. If this props is present the prominent props is automatically applied. If the actions prop is tabs actions will be ignored. Expects Element Tabs, but accepts any valid components or markup.

Top App Bar Events

Name	Default	Required	Params	Description
onNavigation	null	false		Fired when navigation icon is clicked.

Top App Bar Breaking Changes

Description
short (removed): This variant is no longer supported.
shortCollapsed (removed): This variant is no longer supported.
shortCollapsedWithIcons (removed): This variant is no longer supported.
variant (removed): These variants are no longer supported.

Action Item Props

Name	Type	Default	Required	Description
badge	string\|function\|React.ReactNode	undefined	false	The custom action notification badge to be rendered.
icon	string	null	false	Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons).
label	string	null	false	ARIA label value to support screen readers.
type	string	'icon'	false	Type of action item to be rendered.Accepted Values: icon, link, tabs

Top App Bar Fixed Adjust Props

Name	Type	Default	Required	Description
bannerOpen	boolean	false	false	Apply the adjusted left margin.
className	string	undefined	false	The css class name to be passed through to the component markup.
dense	boolean	false	false	Set to the same value as in TopAppBar to have the correct spacing.
prominent	boolean	false	false	Set to the same value as in TopAppBar to have the correct spacing.
tag	string\|React.ElementType\|React.Component	'div'	false	Base component/tag that will be rendered.
useContentMaxWidth	boolean	false	false	If true the content will have a max width according to your theme's breakpoints.

Top App Bar Fixed Adjust Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the TopAppBar. Accepts any valid markup.

@element-public/react-top-app-bar v1.0.0