vue-material/dist/docs/17.bef219a0.js

webpackJsonp([17,27,29],{228:function(e,n,i){n=e.exports=i(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}",""])},314:function(e,n,i){var t,a;i(228);var d=i(426);a=t=t||{},"object"!=typeof t.default&&"function"!=typeof t.default||(a=t=t.default),"function"==typeof a&&(a=a.options),a.render=d.render,a.staticRenderFns=d.staticRenderFns,a._scopeId="data-v-4615340b",e.exports=t},426: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("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></md-ink-ripple>\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple purple">\n              <md-ink-ripple></md-ink-ripple>\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple blue">\n              <md-ink-ripple></md-ink-ripple>\n              This div has ripple effect\n            </div>\n\n            <div class="has-ripple red">\n              <md-ink-ripple></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></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:"scss"}},[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:[]}}});