vue-material/releases/v0.7.1/ink-ripple.2e814707.js

webpackJsonp([15,34],{474:function(e,n,i){i(607);var a=i(0)(null,i(576),"data-v-9d2ca598",null);e.exports=a.exports},539:function(e,n,i){n=e.exports=i(4)(),n.push([e.i,".has-ripple[data-v-9d2ca598]{margin-bottom:16px;padding:20px;display:inline-block;position:relative}.blue[data-v-9d2ca598]{color:#2196f3}.purple[data-v-9d2ca598]{color:#9c27b0}.red[data-v-9d2ca598]{color:#f44336}.card-ripple[data-v-9d2ca598]{width:300px;margin-top:24px}",""])},576:function(e,n){e.exports={render:function(){var e=this,n=e.$createElement,i=e._self._c||n;return i("page-content",{attrs:{"page-title":"Components - Ink Ripple"}},[i("docs-component",[i("div",{slot:"description"},[i("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(" "),i("p",[e._v("To disable the ripple component globally just call the API: ")]),e._v(" "),i("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(" "),i("div",{slot:"api"},[i("api-table",{attrs:{name:"md-ink-ripple"}},[i("md-table",{slot:"properties"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[e._v("Name")]),e._v(" "),i("md-table-head",[e._v("Type")]),e._v(" "),i("md-table-head",[e._v("Description")])],1)],1),e._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[e._v("md-disabled")]),e._v(" "),i("md-table-cell",[i("code",[e._v("Boolean")])]),e._v(" "),i("md-table-cell",[e._v("Disable the ripple effect on the parent element. Default "),i("code",[e._v("false")])])],1)],1)],1)],1)],1),e._v(" "),i("div",{slot:"example"},[i("example-box",{attrs:{"card-title":"Default"}},[i("div",{slot:"demo"},[i("div",{staticClass:"has-ripple"},[i("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),i("div",{staticClass:"has-ripple purple"},[i("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),i("div",{staticClass:"has-ripple blue"},[i("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),i("div",{staticClass:"has-ripple red"},[i("md-ink-ripple"),e._v("\n            This div has ripple effect\n          ")],1),e._v(" "),i("md-card",{staticClass:"card-ripple",attrs:{"md-with-hover":""}},[i("md-card-media",[i("md-ink-ripple"),e._v(" "),i("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})],1),e._v(" "),i("md-card-actions",[i("md-button",{staticClass:"md-icon-button"},[i("md-icon",[e._v("favorite")])],1),e._v(" "),i("md-button",{staticClass:"md-icon-button"},[i("md-icon",[e._v("bookmark")])],1),e._v(" "),i("md-button",{staticClass:"md-icon-button"},[i("md-icon",[e._v("share")])],1)],1)],1)],1),e._v(" "),i("div",{slot:"code"},[i("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(" "),i("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:[]}},607:function(e,n,i){var a=i(539);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);i(5)("3123897f",a,!0)}});