Snackbar

used for all error views

Learn More

• https://material.io/design/components/snackbars.html

Description

1. autodismiss

TODO

1. add renderProps
2. reduce options
3. match material requirements
4. add state to show hide
5. add readme
6. add anything missed from first version
7. add animations
8. add accessibility

Related

• https://github.com/ConciergeAuctions/styled-material-components
• https://github.com/mui-org/material-ui/tree/v1-beta/src
• https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui-icons
• https://github.com/mui-org/material-ui/tree/v1-beta/examples
• https://material.angular.io/components/snack-bar/overview

Later

when we eventually go do something with absolutely positioned transformed elements

  ${props =>
    props.position === 'topleft' &&
    styled.css`
      top: 0;
      left: 0;
      bottom: auto;
      right: auto;
    `};
  ${props =>
    props.position === 'topcenter' &&
    styled.css`
      top: 0;
      left: 0;
      bottom: auto;
      right: 0;
    `};
  ${props =>
    props.position === 'topright' &&
    styled.css`
      top: 0;
      left: auto;
      bottom: auto;
      right: 0;
    `};
  ${props =>
    props.position === 'middleleft' &&
    styled.css`
      top: 0;
      left: 0;
      bottom: 0;
      right: auto;
    `};
  ${props =>
    props.position === 'middlecenter' &&
    styled.css`
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    `};
  ${props =>
    props.position === 'middleright' &&
    styled.css`
      top: 0;
      left: auto;
      bottom: 0;
      right: 0;
    `};
  ${props =>
    props.position === 'bottomleft' &&
    styled.css`
      top: auto;
      left: 0;
      bottom: 0;
      right: auto;
    `};
  ${props =>
    props.position === 'bottomcenter' &&
    styled.css`
      top: auto;
      left: 0;
      bottom: 0;
      right: 0;
    `};
  ${props =>
    props.position === 'bottomright' &&
    styled.css`
      top: auto;
      left: auto;
      bottom: 0;
      right: 0;
    `};
  ${props =>
    props.position === '' &&
    styled.css`
      top: 0;
      left: auto;
      bottom: auto;
      right: 0;
    `};