material design component - mdc

by jihoon kim

HTML

<head>
  <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>
</head>
<div id="mdc-section">
  <label id="nameField" class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <div class="mdc-text-field__ripple"></div>
    <input class="mdc-text-field__input" type="text" aria-labelledby="label">
    <span id="label" class="mdc-floating-label">Name</span>
    <div class="mdc-line-ripple"></div>
  </label>
  <Br/>
  <button id="btn" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">
    <span class="mdc-button__ripple"></span>
    Auto init
  </button>

  <button id="btnNoneRipple" class="mdc-button mdc-button--raised">
    <span class="mdc-button__ripple"></span>
    not Auto init
  </button>

</div>

JavaScript

document.addEventListener("MDCAutoInit:End", function(e) {
  console.info("auto init end",e);
	alert("auto init ended");
});
window.mdc.autoInit(document.querySelector('#mdc-section'));

var btn = document.getElementById("btn").MDCRipple;
btn.listen("click",function(event){
    alert("clicked");
});