Skip to content

A material-ui component that allows you to add a banner underneath the app bar.

License

Notifications You must be signed in to change notification settings

alexplumb/material-ui-banner

Repository files navigation

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

Usage

Imports:

import { Banner, StaticBanner } from 'material-ui-banner';

To embed a banner anywhere on the page

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

To add a static banner to the top of the page

<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.

Options

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'
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

About

A material-ui component that allows you to add a banner underneath the app bar.

Resources

License

Stars

Watchers

Forks

Packages

No packages published