참고
- MDC Web on other frameworks
- The Simple Approach: Wrapping MDC Web vanilla components
- Material Components for the web
- Getting Started - Quick Start (CDN) https://codepen.io/abhiomkar/pen/gQWarJ
- MDC Auto Init
- material-components - github
- Getting started with Material Design Components for web
0. Material site
- material.io
- github-material : github - web, android, ios, flutter
- Contributing
- Filing an Issue
- Components Request Policy
- Code of Conduct
- Stack Overflow (external site)
- Material.io (external site)
- Material Design Guidelines (external site)
- Discord Chat Rooms
1. Quick Start (CDN)
<head> <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet"> <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script></head>2. Material Icons : google font - Material Icons
xxxxxxxxxx<head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></head>3. Base MDC Component
- MDCComponent : the basic mechanisms for implementing component classes.
- MDCFoundation : following “private” properties to subclasses
xxxxxxxxxxconst MDCComponent = mdc.base.MDCComponent;const MDCFoundation = mdc.base.MDCFoundation;4. 컴포넌트 정보 문서 - ( ex : Button )
- "데모" , "문서"를 참고 할 수 있다, 다른 컴포넌트도 동일.
- demo : https://material-components.github.io/material-components-web-catalog/#/component/button
- document : https://material.io/develop/web/components/buttons/
- document(github) : https://github.com/material-components/material-components-web/tree/master/packages/mdc-button
5. Add MDC : https://material.io/develop/web/components
markup
x
<button class="mybutton mdc-button mdc-button--raised"><span class="mdc-button__ripple"></span>Button</button>instantiate mdc Component
using 1
xxxxxxxxxxconst MDCFoo = mdc.foo.MDCFoo;const MDCFooFoundation = mdc.foo.MDCFooFoundation;const foo = new MDCFoo(document.querySelector('.mdc-foo'));const foos = [].map.call(document.querySelectorAll('.mdc-foo'), function(el) {return new MDCFoo(el);});using 2
xxxxxxxxxxconst buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));
6. Button : https://material.io/develop/web/components/buttons/
x
<head> <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet"> <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script></head><button id="btn" class="mybutton mdc-button mdc-button--raised"> <span class="mdc-button__ripple"></span> Button</button><button id="btn2" class="mybutton mdc-button mdc-button--raised"> <span class="mdc-button__ripple"></span> Button</button>x
// using 1 - mdc Component : add ripple effectconst buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));buttonRipple.listen('click', function(event){ console.info(event); alert('Hello world, '+event.target.value);});// using 2 - mdc.base.MDCComponentvar btn = new mdc.base.MDCComponent(document.getElementById("btn"),new mdc.base.MDCFoundation());btn.listen('click', function(event){ console.info(event); alert('Hello world, '+event.target.value);});btn.root_ // reference dom element// using 3 - attachTomdc.ripple.MDCRipple.attachTo(document.getElementById("btn2") );7. Snackbar : https://material.io/develop/web/components/snackbars/
- Sample : https://jsfiddle.net/softm/7qub5o2m/
x
<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>xxxxxxxxxxconst 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 4000btnShow.listen('click', function(event){ snackbar.open();});btnHide.listen('click', function(event){ snackbar.close();});8. Auto init - Auto Init
data-mdc-auto-initattribute to the root element with its value set to the component’s JavaScript class name (e.g.,MDCTextField).
x
<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>xxxxxxxxxxdocument.addEventListener("MDCAutoInit:End", function(e) { console.info("auto init end",e); alert("auto init ended");});//window.mdc.autoInit();window.mdc.autoInit(document.querySelector('#mdc-section'));// Once mdc.autoInit() is called, you can access the component instance via an MDCTextField property on that element.var btn = document.getElementById("btn").MDCRipple;btn.listen("click",function(event){ alert("clicked");});custom auto init : register, unregister
sample : https://jsfiddle.net/softm/sfgjw8z0/
x
<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>x
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'); */window.mdc.autoInit(document.querySelector('#mdc-section'));
댓글