vue-material/dist/docs/16.e2efe67b.js

webpackJsonp([16,32],{245:function(e,t,a){t=e.exports=a(1)(),t.push([e.id,".card-holder .md-card[data-v-6e7e0ccb]{width:100%;max-width:320px;margin:0 4px 16px;display:inline-block;vertical-align:top}.card-example .md-subhead .md-icon[data-v-6e7e0ccb]{width:16px;min-width:16px;height:16px;min-height:16px;font-size:16px;line-height:16px}.card-example .md-subhead span[data-v-6e7e0ccb]{vertical-align:middle}.card-example .card-reservation[data-v-6e7e0ccb]{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.card-example .card-reservation .md-icon[data-v-6e7e0ccb]{margin:8px;color:rgba(0,0,0,.54)!important}.card-example .card-reservation .md-button[data-v-6e7e0ccb]{border-radius:2px!important}",""])},345:function(e,t,a){var d,n;a(566);var i=a(501);n=d=d||{},"object"!=typeof d.default&&"function"!=typeof d.default||(n=d=d.default),"function"==typeof n&&(n=n.options),n.render=i.render,n.staticRenderFns=i.staticRenderFns,n._scopeId="data-v-6e7e0ccb",e.exports=d},501:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("page-content",{attrs:{"page-title":"Components - Card"}},[a("docs-component",[a("div",{slot:"description"},[a("p",[e._v("Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.")]),e._v(" "),a("p",[e._v("The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.")]),e._v(" "),a("p",[e._v('You can also use other Material components inside the card, like the "Complete Example".')]),e._v(" "),a("p",[e._v("The following classes can be applied to change the color palette:")]),e._v(" "),a("ul",{staticClass:"md-body-2"},[a("li",[a("code",[e._v("md-primary")])]),e._v(" "),a("li",[a("code",[e._v("md-accent")])]),e._v(" "),a("li",[a("code",[e._v("md-warn")])])])]),e._v(" "),a("div",{slot:"api"},[a("api-table",{attrs:{name:"md-card"}},[a("md-table",{slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Type")]),e._v(" "),a("md-table-head",[e._v("Description")])],1)],1),e._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[e._v("md-with-hover")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v("Enable full hover elevation in card. Default "),a("code",[e._v("false")])])],1)],1)],1)],1),e._v(" "),a("api-table",{attrs:{name:"md-card-header"}},[a("p",[e._v("Can display titles, subheads, medias and avatars in a header.")]),e._v(" "),a("p",[e._v("No options available")])]),e._v(" "),a("api-table",{attrs:{name:"md-card-header-text"}},[a("p",[e._v('Used inside a card header to group the title and the subhead. Useful to align with an action (like a overflow button) or a media inside headers, like on the "Media" example.')]),e._v(" "),a("p",[e._v("No options available")])]),e._v(" "),a("api-table",{attrs:{name:"md-card-content"}},[a("p",[e._v("Display the content of the card. Most used with plain text or with simple HTML content, like bold and italic tags.")]),e._v(" "),a("p",[e._v("No options available")])]),e._v(" "),a("api-table",{attrs:{name:"md-card-actions"}},[a("p",[e._v("Hold the actions of a card align them on the right. Here you can add "),a("code",[e._v("<md-button>")]),e._v(" with or without icons.")]),e._v(" "),a("p",[e._v("No options available")])]),e._v(" "),a("api-table",{attrs:{name:"md-card-area"}},[a("div",{slot:"properties"},[a("p",[e._v("A card area create a division inside the card. This will apply a border on the bottom (only works if the card area is not the last element).")]),e._v(" "),a("p",[e._v('You can see an example of use on the "Complete example".')]),e._v(" "),a("md-table",[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Type")]),e._v(" "),a("md-ta
attrs:{"card-title":"Complete Example"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",{staticClass:"card-example"},[a("md-card-area",{attrs:{"md-inset":""}},[a("md-card-media",{attrs:{"md-ratio":"16:9"}},[a("img",{attrs:{src:"assets/card-example.jpg",alt:"Coffee House"}})]),e._v(" "),a("md-card-header",[a("h2",{staticClass:"md-title"},[e._v("Coffee House")]),e._v(" "),a("div",{staticClass:"md-subhead"},[a("md-icon",[e._v("location_on")]),e._v(" "),a("span",[e._v("2 miles")])],1)]),e._v(" "),a("md-card-content",[e._v("\n                Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n              ")])],1),e._v(" "),a("md-card-content",[a("h3",{staticClass:"md-subheading"},[e._v("Today's availability")]),e._v(" "),a("div",{staticClass:"card-reservation"},[a("md-icon",[e._v("access_time")]),e._v(" "),a("md-button-toggle",{staticClass:"md-button-group",attrs:{"md-single":""}},[a("md-button",[e._v("5:30PM")]),e._v(" "),a("md-button",[e._v("7:30PM")]),e._v(" "),a("md-button",[e._v("9:00PM")])],1)],1)]),e._v(" "),a("md-card-actions",[a("md-button",{staticClass:"md-primary"},[e._v("Reserve")])],1)],1)],1),e._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-card class="card-example">\n              <md-card-area md-inset>\n                <md-card-media md-ratio="16:9">\n                  <img src="assets/card-example.jpg" alt="Coffee House">\n                </md-card-media>\n\n                <md-card-header>\n                  <h2 class="md-title">Coffee House</h2>\n                  <div class="md-subhead">\n                    <md-icon>location_on</md-icon>\n                    <span>2 miles</span>\n                  </div>\n                </md-card-header>\n\n                <md-card-content>\n                  Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n                </md-card-content>\n              </md-card-area>\n\n              <md-card-content>\n                <h3 class="md-subheading">Today\'s availability</h3>\n                <div class="card-reservation">\n                  <md-icon>access_time</md-icon>\n                  <md-button-toggle md-single class="md-button-group">\n                    <md-button>5:30PM</md-button>\n                    <md-button>7:30PM</md-button>\n                    <md-button>9:00PM</md-button>\n                  </md-button-toggle>\n                </div>\n              </md-card-content>\n\n              <md-card-actions>\n                <md-button class="md-primary">Reserve</md-button>\n              </md-card-actions>\n            </md-card>\n          ')]),e._v(" "),a("code-block",{attrs:{lang:"sass"}},[e._v("\n            .card-example {\n              .md-subhead {\n                .md-icon {\n                  $size: 16px;\n\n                  width: $size;\n                  min-width: $size;\n                  height: $size;\n                  min-height: $size;\n                  font-size: $size;\n                  line-height: $size;\n                }\n\n                span {\n                  vertical-align: middle;\n                }\n              }\n\n              .card-reservation {\n                margin-top: 8px;\n                display: flex;\n                align-items: center;\n                justify-content: space-around;\n\n                .md-icon {\n                  margin: 8px;\n                  color: rgba(#000, .54) !important;\n                }\n\n                .md-button {\n                  border-radius: 2px !important;\n                }\n              }\n            }\n          ")])],1)])],1)])],1)},staticRenderFns:[]}},566:function(e,t,a){var d=a(245);"string"==typeof d&&(d=[[e.id,d,""]]);a(2)(d,{});d.locals&&(e.exports=d.locals)}});