material-ui-banner

Bringing the Material Design banner component to the material-ui library. Spec here: https://material.io/design/components/banners.html

Installation

npm install material-ui-banner --save

<Banner
  icon={<div />}
  label="Text goes here"
  open
/>

<AppBar>
  <Toolbar />
</AppBar>

<StaticBanner />

You would then open the banner elsewhere in the app like so:

StaticBanner.show({
  icon: <div />,
  label: 'This is an example of a static banner with one line of text.',
});

Please refer to src/demo for examples.

These options are compatible with both <Banner> and StaticBanner.show()

Name	Type	Description	Default
open	boolean	(required) Indicates whether or not the banner is displayed	false
label	string	(required) Text label that appears on the banner	''
icon	element	Material icon to be displayed on the left side of the banner	null
iconProps	object	Additional properties that can be passed to the icon. See https://material-ui.com/api/avatar/	{}
showDismissButton	boolean	Whether or not to display the default "Dismiss" button	true
dismissButtonLabel	string	Text label for the default "Dismiss" button	'Dismiss'
onClose	function	Callback invoked when clicking the Dismiss button. StaticBanner passes a close handler automatically	null
buttonLabel	string	If provided, add a second button (or only button, if the dismiss button is hidden)	null
buttonOnClick	function	Click event handler for the custom second button	null
buttonComponent	element	The element to be used for the custom second button (passed as component={buttonComponent} in MuiButton)	'button'
buttonProps	objct	Additional properties that can be passed to the button. See https://material-ui.com/api/button/	{}
paperProps	objct	Additional properties that can be passed to the Paper component. See https://material-ui.com/api/paper/	{}
cardProps	objct	Additional properties that can be passed to the Card component. See https://material-ui.com/api/card/	{}
appBar	boolean	Set to true if the banner should appear at the very top of the page beneath the AppBar component	false