A material-ui component that allows you to add a banner underneath the app bar.
npm install material-ui-bannershell-script
npm install material-ui-banner --save
`
Usage
$3
`
import { Banner, StaticBanner } from 'material-ui-banner';
`
$3
`jsx
label="Text goes here"
open
/>
`
$3
`jsx
`
You would then open the banner elsewhere in the app like so:
`
StaticBanner.show({
icon: ,
label: 'This is an example of a static banner with one line of text.',
});
`
Please refer to src/demo for examples.
Options
These options are compatible with both 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'
dismissButtonProps
object
Additional properties that can be passed to the default "Dismiss" button. See https://material-ui.com/api/button/
{}
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/. If appBar is set to true, you can also use this parameter to pass in properties to the Container component. See https://material-ui.com/api/container/`
{}
appBar
boolean
Set to true if the banner should appear at the very top of the page beneath the AppBar component
false
License
Uses the MIT License