webpackJsonp([26,32],{108:function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={data:function(){return{src:null}},methods:{loadImage:function(){var e=["assets/joker-1.jpg","assets/joker-2.jpg","assets/joker-3.jpg","assets/card-image-1.jpg","assets/card-image-2.jpg"];this.src=e[Math.floor(5*Math.random())]},clearImage:function(){this.src=null}}},e.exports=a.default},351:function(e,a,t){var s,n;s=t(108);var d=t(452);n=s=s||{},"object"!=typeof s.default&&"function"!=typeof s.default||(n=s=s.default),"function"==typeof n&&(n=n.options),n.render=d.render,n.staticRenderFns=d.staticRenderFns,e.exports=s},452:function(e,a){e.exports={render:function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("page-content",{attrs:{"page-title":"Components - Image Loader"}},[t("docs-component",[t("div",{slot:"description"},[t("p",[e._v("Illustrations and photographs may load and transition in three phases by staggering opacity, exposure, and saturation levels.")])]),e._v(" "),t("div",{slot:"api"},[t("api-table",{attrs:{name:"md-image"}},[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-src")]),e._v(" "),t("md-table-cell",[t("code",[e._v("String")])]),e._v(" "),t("md-table-cell",[e._v("The image source. Accepts any image file extension.")])],1)],1)],1)],1)],1),e._v(" "),t("div",{slot:"example"},[t("example-box",{attrs:{"card-title":"Default"}},[t("div",{slot:"demo"},[t("md-button",{staticClass:"md-primary md-raised",on:{click:e.loadImage}},[e._v("Load Image")]),e._v(" "),t("md-button",{staticClass:"md-primary md-raised",on:{click:e.clearImage}},[e._v("Clear Image")]),e._v(" "),t("div",[t("md-image",{attrs:{"md-src":e.src}})],1)],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-button class="md-primary md-raised" @click="loadImage">Load Image</md-button>\n            <md-button class="md-primary md-raised" @click="clearImage">Clear Image</md-button>\n\n            <div>\n              <md-image :md-src="src"></md-image>\n            </div>\n          ')]),e._v(" "),t("code-block",{attrs:{lang:"xml"}},[e._v("\n            export default {\n              data: () => ({\n                src: null\n              }),\n              methods: {\n                loadImage() {\n                  let options = [\n                    'assets/joker-1.jpg',\n                    'assets/joker-2.jpg',\n                    'assets/joker-3.jpg',\n                    'assets/card-image-1.jpg',\n                    'assets/card-image-2.jpg'\n                  ];\n\n                  this.src = options[Math.floor(Math.random() * 5)];\n                },\n                clearImage() {\n                  this.src = null;\n                }\n              }\n            };\n          ")])],1)])],1)])],1)},staticRenderFns:[]}}});