vue-material/dist/docs/19.62eeb5ff.js

webpackJsonp([19,32],{238:function(e,n,t){n=e.exports=t(1)(),n.push([e.id,".has-ripple[data-v-4615340b]{margin-bottom:16px;padding:20px;display:inline-block;position:relative}.blue[data-v-4615340b]{color:#2196f3}.purple[data-v-4615340b]{color:#9c27b0}.red[data-v-4615340b]{color:#f44336}.card-ripple[data-v-4615340b]{width:300px;margin-top:24px}",""])},352:function(e,n,t){var i,a;t(559);var d=t(480);a=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(a=i=i.default),"function"==typeof a&&(a=a.options),a.render=d.render,a.staticRenderFns=d.staticRenderFns,a._scopeId="data-v-4615340b",e.exports=i},480:function(e,n){e.exports={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("page-content",{attrs:{"page-title":"Components - Ink Ripple"}},[t("docs-component",[t("div",{slot:"description"},[t("p",[e._v("Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.")]),e._v(" "),t("p",[e._v("To disable the ripple component globally just call the API: ")]),e._v(" "),t("code-block",{attrs:{lang:"javascript"}},[e._v("\n        // Anywhere\n        Vue.material.inkRipple = false\n\n        // Inside a Vue Intance\n        this.$material.inkRipple = false\n      ")])],1),e._v(" "),t("div",{slot:"api"},[t("api-table",{attrs:{name:"md-ink-ripple"}},[t("md-table",{slot:"properties"},[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Type")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("md-disabled")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Boolean")])]),e._v(" "),t("md-table-cell",[e._v("Disable the ripple effect on the parent element. Default "),t("code",[e._v("false")])])],1)],1)],1)],1)],1),e._v(" "),t("div",{slot:"example"},[t("example-box",{attrs:{"card-title":"Default"}},[t("div",{slot:"demo"},[t("div",{staticClass:"has-ripple"},[t("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),t("div",{staticClass:"has-ripple purple"},[t("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),t("div",{staticClass:"has-ripple blue"},[t("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),t("div",{staticClass:"has-ripple red"},[t("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),t("md-card",{staticClass:"card-ripple",attrs:{"md-with-hover":""}},[t("md-card-media",[t("md-ink-ripple"),e._v(" "),t("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})],1),e._v(" "),t("md-card-actions",[t("md-button",{staticClass:"md-icon-button"},[t("md-icon",[e._v("favorite")])],1),e._v(" "),t("md-button",{staticClass:"md-icon-button"},[t("md-icon",[e._v("bookmark")])],1),e._v(" "),t("md-button",{staticClass:"md-icon-button"},[t("md-icon",[e._v("share")])],1)],1)],1)],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <div class="has-ripple">\n              <md-ink-ripple />\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple purple">\n              <md-ink-ripple />\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple blue">\n              <md-ink-ripple />\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple red">\n              <md-ink-ripple />\n              This div has ripple effect\n            </div>\n\n            <md-card class="card-ripple" md-with-hover>\n              <md-card-media>\n                <md-ink-ripple />\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-actions>\n                <md-button class="md-icon-button">\n                  <md-icon>favorite</md-icon>\n                </md-button>\n\n                <md-button class="md-icon-button">\n                  <md-icon>bookmark</md-icon>\n                </md-button>\n\n                <md-button class="md-icon-button">\n                  <md-icon>share</md-icon>\n                </md-button>\n              </md-card-actions>\n            </md-card>\n          ')]),e._v(" "),t("code-block",{attrs:{lang:"sass"}},[e._v("\n            .has-ripple {\n              margin-bottom: 16px;\n              padding: 20px;\n              display: inline-block;\n              position: relative;\n            }\n\n            .blue {\n              color: #2196F3;\n            }\n\n            .purple {\n              color: #9C27B0;\n            }\n\n            .red {\n              color: #F44336;\n            }\n\n            .card-ripple {\n              width: 300px;\n              margin-top: 24px;\n            }\n          ")])],1)])],1)])],1)},staticRenderFns:[]}},559:function(e,n,t){var i=t(238);"string"==typeof i&&(i=[[e.id,i,""]]);t(2)(i,{});i.locals&&(e.exports=i.locals)}});