material design component - autoinit register, unregister

autoinit register, unregister

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="auto-init-text">
    <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="auto-init-button">
    <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>

CSS

.mdc-button  {
  text-transform: none
}

JavaScript

document.addEventListener("MDCAutoInit:End", () => {
	alert("auto init ended");
});
mdc.autoInit.register('auto-init-text'  , mdc.textField.MDCTextField );
mdc.autoInit.register('auto-init-button', mdc.ripple.MDCRipple );
/* mdc.autoInit.unregister('auto-init-text'); */
/* mdc.autoInit.unregister('auto-init-button'); */
debugger;
window.mdc.autoInit(document.querySelector('#mdc-section'));