material design component - Button

material design component - Button

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>

 <button class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Button</span>
  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
</button>
 <div class="mdc-touch-target-wrapper">
  <button class="mdc-button mdc-button--touch mdc-button--raised">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">My Accessible Button</span>
    <div class="mdc-button__touch"></div>
  </button>
</div>

 <button id="fab" class="mdc-fab app-fab--absolute" aria-label="Favorite">
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

<button id="add-to-favorites"
   class="mdc-icon-button"
   aria-label="Add to favorites"
   aria-pressed="false">
   <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
   <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

<div class="mdc-snackbar mdc-snackbar--stacked">
  <div class="mdc-snackbar__surface">
    <div class="mdc-snackbar__label"
         role="status"
         aria-live="polite">
...

CSS

.app-fab--absolute {
  position: fixed !important;;
  bottom: 1rem;
  right: 1rem;
}

@media(min-width: 1024px) {
   .app-fab--absolute {
    bottom: 1.5rem;
    right: 1.5rem;
  }
} 

/* .mdc-fab {
  position: fixed !important;
  bottom: 20px;
  right: 10px;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  transform: scale(0);
} */

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'));
const iconButton = new mdc.iconButton.MDCIconButtonToggle(document.querySelector('#add-to-favorites'));

snackbar.timeoutMs = 4000; // min 4000
btnShow.listen('click', function(event){
	snackbar.open();
});
btnHide.listen('click', function(event){
	snackbar.close();
});

/* const fab = new mdc.fab.MDCFab(document.querySelector('#fab')); */
debugger;