Material-ui: Support Banner Component

[MastroLindus]

Hi,

If I am not mistaken there's no current support for the banner component:
https://material.io/design/components/banners.html#
https://material.io/design/components/banners.html#anatomy

If it is not supported, are you planning to do it?
If it is provided, could you point me to its documentation?

Thanks and keep up the fantastic work!

[AirborneEagle]

I just noticed this as well.
Until a Banner Component is supported, what would be the best "work around" ,
maybe just a Paper that moves in, and contains some actions?

[oliviertassinari]

what would be the best "work around" ,
maybe just a Paper that moves in, and contains some actions?

@AirborneEagle Here is an idea. I hope that help. It's inspired by our custom Grid demo: https://material-ui.com/layout/grid/#complex-grid.

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  paper: {
    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
      theme.spacing.unit
    }px ${theme.spacing.unit * 2}px`
  },
  avatar: {
    backgroundColor: theme.palette.primary.main
  }
});

function Banner(props) {
  const { classes } = props;
  return (
    <React.Fragment>
      <Paper elevation={0} className={classes.paper}>
        <Grid container spacing={16} alignItems="center">
          <Grid item>
            <Avatar className={classes.avatar}>
              <SignalWifiOffIcon />
            </Avatar>
          </Grid>
          <Grid item>
            <Typography>
              You have lost connection to the internet. This app is offline.
            </Typography>
          </Grid>
        </Grid>
        <Grid container justify="flex-end" spacing={8}>
          <Grid item>
            <Button color="primary">Turn on wifi</Button>
          </Grid>
        </Grid>
      </Paper>
      <Divider />
      <CssBaseline />
    </React.Fragment>
  );
}

Banner.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Banner);

https://codesandbox.io/s/oj1mzjmk06

[alexplumb]

I had to implement this in one of my projects and couldn't really find anything that fit the material design spec, so I've published the components I made: https://github.com/alexplumb/material-ui-banner

[oliviertassinari]

@alexplumb Thanks for sharing.