Answer: {{ answer }}
9 | ``` 10 | 11 | ```javascript 12 | var vm = new Vue({ 13 | data: { 14 | answer: null 15 | } 16 | }) 17 | ``` 18 | 19 | > or use default slot for label 20 | 21 | ```html 22 |DEMO
3 | 4 | -------------------------------------------------------------------------------- /components/ripple/entry.js: -------------------------------------------------------------------------------- 1 | // import './styles.scss' 2 | import { autoInit } from '../base' 3 | import plugin from './index.js' 4 | export default plugin 5 | 6 | autoInit(plugin) 7 | -------------------------------------------------------------------------------- /components/ripple/index.js: -------------------------------------------------------------------------------- 1 | import { BasePlugin } from '../base' 2 | import mdcRipple from './mdc-ripple.vue' 3 | 4 | export * from './mdc-ripple-base.js' 5 | 6 | export { mdcRipple } 7 | 8 | export default BasePlugin({ 9 | mdcRipple 10 | }) 11 | -------------------------------------------------------------------------------- /components/ripple/mdc-ripple-base.js: -------------------------------------------------------------------------------- 1 | import MDCRippleFoundation from '@material/ripple/foundation.js' 2 | import { 3 | supportsCssVariables, 4 | getMatchesProperty, 5 | applyPassive 6 | } from '@material/ripple/util' 7 | 8 | export class RippleBase extends MDCRippleFoundation { 9 | static get MATCHES() { 10 | /* global HTMLElement */ 11 | return ( 12 | RippleBase._matches || 13 | (RippleBase._matches = getMatchesProperty(HTMLElement.prototype)) 14 | ) 15 | } 16 | 17 | static isSurfaceActive(ref) { 18 | return ref[RippleBase.MATCHES](':active') 19 | } 20 | 21 | constructor(vm, options) { 22 | super( 23 | Object.assign( 24 | { 25 | browserSupportsCssVars: () => { 26 | return supportsCssVariables(window) 27 | }, 28 | isUnbounded: () => { 29 | return false 30 | }, 31 | isSurfaceActive: () => { 32 | return vm.$el[RippleBase.MATCHES](':active') 33 | }, 34 | isSurfaceDisabled: () => { 35 | return vm.disabled 36 | }, 37 | addClass(className) { 38 | vm.$set(vm.classes, className, true) 39 | }, 40 | removeClass(className) { 41 | vm.$delete(vm.classes, className) 42 | }, 43 | containsEventTarget: target => vm.$el.contains(target), 44 | registerInteractionHandler: (evt, handler) => { 45 | vm.$el.addEventListener(evt, handler, applyPassive()) 46 | }, 47 | deregisterInteractionHandler: (evt, handler) => { 48 | vm.$el.removeEventListener(evt, handler, applyPassive()) 49 | }, 50 | registerDocumentInteractionHandler: (evtType, handler) => 51 | document.documentElement.addEventListener( 52 | evtType, 53 | handler, 54 | applyPassive() 55 | ), 56 | deregisterDocumentInteractionHandler: (evtType, handler) => 57 | document.documentElement.removeEventListener( 58 | evtType, 59 | handler, 60 | applyPassive() 61 | ), 62 | registerResizeHandler: handler => { 63 | return window.addEventListener('resize', handler) 64 | }, 65 | deregisterResizeHandler: handler => { 66 | return window.removeEventListener('resize', handler) 67 | }, 68 | updateCssVariable: (varName, value) => { 69 | vm.$set(vm.styles, varName, value) 70 | }, 71 | computeBoundingRect: () => { 72 | return vm.$el.getBoundingClientRect() 73 | }, 74 | getWindowPageOffset: () => { 75 | return { x: window.pageXOffset, y: window.pageYOffset } 76 | } 77 | }, 78 | options 79 | ) 80 | ) 81 | } 82 | } 83 | 84 | export const RippleMixin = { 85 | data() { 86 | return { 87 | classes: {}, 88 | styles: {} 89 | } 90 | }, 91 | mounted() { 92 | this.ripple = new RippleBase(this) 93 | this.ripple.init() 94 | }, 95 | beforeDestroy() { 96 | this.ripple.destroy() 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /components/ripple/mdc-ripple.vue: -------------------------------------------------------------------------------- 1 | 2 |DEMO
3 | 4 | -------------------------------------------------------------------------------- /components/theme/entry.js: -------------------------------------------------------------------------------- 1 | // import './styles.scss' 2 | import { autoInit } from '../base' 3 | import plugin from './index.js' 4 | export default plugin 5 | 6 | autoInit(plugin) 7 | -------------------------------------------------------------------------------- /components/theme/index.js: -------------------------------------------------------------------------------- 1 | import { BasePlugin } from '../base' 2 | import mdcTheme from './mdc-theme.vue' 3 | 4 | export { mdcTheme } 5 | 6 | export default BasePlugin({ 7 | mdcTheme 8 | }) 9 | -------------------------------------------------------------------------------- /components/theme/mdc-theme.vue: -------------------------------------------------------------------------------- 1 | 2 |