mdc - snackbar

material design component - snackbar

by jihoon kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/5.1.0/material-components-web.min.js"></script>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>
 <body>
<button id="btnShow" class="mybutton mdc-button mdc-button--raised">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__label">Show</span>
</button>
<button id="btnHide" class="mybutton mdc-button mdc-button--raised">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__label">Hide</span>
</button>
<div class="mdc-snackbar mdc-snackbar--stacked">
  <div class="mdc-snackbar__surface">
    <div class="mdc-snackbar__label"
         role="status"
         aria-live="polite">
      Can't send photo. Retry in 5 seconds.
    </div>
    <div class="mdc-snackbar__actions">
      <button type="button" class="mdc-button mdc-snackbar__action">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Retry</span>
      </button>
    </div>
  </div>
</div>
 </body>
  

</html>

CSS

.mdc-theme--primary {
  background-color:red;
}

.mdc-components {
  box-sizing: border-box;
  display: flex;
  font-family: Roboto;
  margin: 64px auto;
  width: 1664px;
}
.mdc-components__section {
  display: flex;
}
.mdc-components__column {
  display: flex;
  height: 664px;
  flex-direction: column;
  margin: 0 8px;
  width: 400px;
}
.mdc-components .flex {
  flex: 1;
  box-sizing: border-box;
}
.mdc-components p {
  color: #616161;
  font-size: 14px;
  font-weight: bold;
}

.mdc-component > p {
  color: #616161;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 0;
}
.mdc-component__section {
  align-items: center;
  background-color: #EEEEEE;
  display: flex;
  flex-direction: column;
  height: 400px;
  position: relative;
  overflow: hidden;
  width: 400px;
}
.mdc-component__section--size-narrow {
  height: 152px;
}
.mdc-component__section__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 30px;
}
.mdc-component__section__content__frame {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.mdc-component__section--size-full {
  height: 620px;
}
.mdc-component__containers {
  align-items: flex-start;
  display: flex;
  height: 292px;
  flex-direction: row;
}
.mdc-component__containers__primary__only p {
  display: none;
}
.mdc-component__containers__primary, .mdc-component__containers__secondary {
  display: flex;
  align-items: center;
}
.mdc-component__containers__primary > p, .mdc-component__containers__secondary > p {
  color: #616161;
  font-size: 11px;
  font-weight: bold;
}
.mdc-component__containers__primary__only {
  margin-top: 40px;
}
.mdc-component__containers__secondary {
  margin-left: 80px;
}
.mdc-component__containers__primary, .mdc-component__containers__secondary {
  flex-direction: column;
}
.mdc-component__containers__primary > p, .mdc-component__containers__secondary > p {
  margin: 25px 0 15px;
}
.mdc-component__containers__primary >...

JavaScript

const btnShow = new mdc.ripple.MDCRipple(document.querySelector('#btnShow'));
const btnHide = new mdc.ripple.MDCRipple(document.querySelector('#btnHide'));
const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));
snackbar.timeoutMs = 4000; // min 4000
snackbar.open();
btnShow.listen('click', function(event){
	snackbar.open();
});
btnHide.listen('click', function(event){
	snackbar.close();
});