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
Side App Bar has been implemented to create left-side navigation on a page.
The Side App Bar is composed of 4 subcomponents:
SideAppBar
The root component within which all related components will be placed
SideAppBarNavigation
This root area to display each tab of the SideAppBar component
SideAppBarTab
Each tab, which could be clicked to display different content
SideAppBarDrawer
The content to be displayed or hidden
Side App Bar Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
variant
string
'surface'
false
Background theme color. Accepts one of 'primary', 'secondary', or 'surface'.Accepted Values: primary, secondary, surface
Side App Bar Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Accepts one or more Tab components.
Side App Bar Drawer Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
elevated
boolean
false
false
Apply elevated styles to raise the tab-bar above standard content.
Side App Bar Drawer Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Accepts SideTab components.
Side App Bar Indicator Props
Name
Type
Default
Required
Description
active
boolean
false
false
Visually activates the indicator.
className
string
undefined
false
The css class name to be passed through to the component markup.
icon
string
null
false
The side-app-bar-tab-indicator will use an underline if no icon is provided.
id
string
undefined
false
Randomly generated id. May be overwritten.
Side App Bar List Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
variant
string
'surface'
false
Background theme color. Accepts one of 'primary', 'secondary', or 'surface'.Accepted Values: primary, secondary, surface
Side App Bar List Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Accepts SideTab components.
Side App Bar List Item Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
Side App Bar List Item Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Accepts SideTab components.
Side App Bar Navigation Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
Side App Bar Navigation Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Accepts SideTab components.
Side App Bar Tab Props
Name
Type
Default
Required
Description
active
boolean
undefined
false
Indicates that the tab is active.
className
string
undefined
false
The css class name to be passed through to the component markup.
id
string
undefined
false
Randomly generated id. May be overwritten.
indicatorIcon
string
null
false
An icon to be used as the tab indicator. Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). If no icon is provided the tab-indicator will use an underline.
Side App Bar Tab Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
The displayed content. Expects a valid string, though will accept any valid components or markup. If label and children are both set, label will take priority.
icon
React.ReactNode
undefined
false
Add a leading icon to the tab.
label
React.ReactNode
null
false
The displayed text. Expects a valid string. If label and children are both set, label will take priority.