\n \n \n\n \n \n phone\n \n\n \n \n phone\n My Item 1\n \n\n \n phone\n My Item 2\n \n\n \n phone\n My Item 3\n \n \n \n\n \n \n near_me\n \n\n \n \n Find on map\n near_me\n \n\n \n Call\n phone\n \n \n \n\n Open contact card\n ')]),t._v(" "),e("code-block",{attrs:{lang:"scss"}},[t._v("\n .author-card {\n padding: 8px 16px;\n display: flex;\n align-items: center;\n\n .md-avatar {\n margin-right: 16px;\n }\n\n .author-card-info {\n display: flex;\n flex-flow: column;\n flex: 1;\n }\n\n span {\n font-size: 16px;\n }\n\n .author-card-links {\n display: flex;\n\n a + a {\n margin-left: 8px;\n }\n }\n }\n ")])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("th",{staticClass:"md-table-head",class:t.classes,on:{click:t.changeSort}},[e("div",{directives:[{name:"md-ink-ripple",rawName:"v-md-ink-ripple",value:!t.mdSortBy,expression:"!mdSortBy"}],staticClass:"md-table-head-container"},[e("div",{staticClass:"md-table-head-text md-test"},[t.mdSortBy?e("md-icon",{staticClass:"md-sortable-icon"},[t._v("arrow_downward")]):t._e(),t._v(" "),t._t("default"),t._v(" "),t.mdTooltip?e("md-tooltip",[t._v(t._s(t.mdTooltip))]):t._e()],!0)])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-input-container",class:[t.themeClass,t.classes]},[t._t("default"),t._v(" "),t.enableCounter?e("span",{staticClass:"md-count"},[t._v(t._s(t.inputLength)+" / "+t._s(t.counterLength))]):t._e(),t._v(" "),t.mdHasPassword?e("md-button",{staticClass:"md-icon-button md-toggle-password",on:{click:t.togglePasswordType}},[e("md-icon",[t._v(t._s(t.showPassword?"visibility_off":"visibility"))])]):t._e()],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Input"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Inputs allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input.")])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-input-container"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-inline")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create inline field with a label or placeholder. Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-has-password")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Show a button to toggle the password visibility. Default "),e("code",[t._v("false")])])])])]),t._v(" "),e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-input-invalid")]),t._v(" "),e("md-table-cell",[t._v("Set the error class")])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-input"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("v-model")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("A required model object to bind the value.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("type")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Sets the type. Default "),e("code",[t._v("text")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("disabled")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Disable the input and prevent his actions. Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("required")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v('Apply the required rule to style the label with an "*". Default '),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("placeholder")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Sets the placeholder.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("maxlength")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Sets the maxlength and enable the text counter.")])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-textarea"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("v-model")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("A required model object to bind the value.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("disabled")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Disable the textarea and prevent his actions. Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("required")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v('Apply the required rule to style the label with an "*". Default '),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("placeholder")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Sets the placeholder.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("maxlength")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Sets the maxlength and enable the text counter.")])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Regular fields"}},[e("div",{slot:"demo"},[e("form",{attrs:{novalidate:""},on:{submit:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-input-container",[e("label",[t._v("Initial value")]),t._v(" "),e("md-input",{directives:[{name:"model",rawName:"v-model",value:t.initialValue,expression:"initialValue"}],domProps:{value:t.initialValue},on:{input:function(e){t.initialValue=e}}})]),t._v(" "),e("md-input-container",[e("label",[t._v("With label")]),t._v(" "),e("md-input",{attrs:{placeholder:"My nice placeholder"}})]),t._v(" "),e("md-input-container",{attrs:{"md-inline":""}},[e("label",[t._v("Inline field")]),t._v(" "),e("md-input")]),t._v(" "),e("md-input-container",[e("label",[t._v("Number")]),t._v(" "),e("md-input",{attrs:{type:"number"}})]),t._v(" "),e("md-input-container",[e("label",[t._v("Textarea")]),t._v(" "),e("md-textarea")]),t._v(" "),e("md-input-container",[e("label",[t._v("Disabled")]),t._v(" "),e("md-input",{attrs:{disabled:""}})])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n ')]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n export default {\n data() {\n return {\n initialValue: 'My initial value'\n };\n }\n };\n ")])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Passwords"}},[e("div",{slot:"demo"},[e("form",{attrs:{novalidate:""},on:{submit:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-input-container",[e("label",[t._v("Regular Password")]),t._v(" "),e("md-input",{attrs:{type:"password"}})]),t._v(" "),e("md-input-container",{attrs:{"md-has-password":""}},[e("label",[t._v("Password Reveal")]),t._v(" "),e("md-input",{attrs:{type:"password"}})])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Required and Errors"}},[e("div",{slot:"demo"},[e("form",{attrs:{novalidate:""},on:{submit:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-input-container",[e("label",[t._v("Required")]),t._v(" "),e("md-input",{attrs:{required:""}})]),t._v(" "),e("md-input-container",{staticClass:"md-input-invalid"},[e("label",[t._v("Error")]),t._v(" "),e("md-input",{attrs:{required:""}})]),t._v(" "),e("md-input-container",{staticClass:"md-input-invalid"},[e("label",[t._v("Error with message")]),t._v(" "),e("md-input",{attrs:{required:""}}),t._v(" "),e("span",{staticClass:"md-error"},[t._v("Validation message")])]),t._v(" "),e("md-input-container",{staticClass:"md-input-invalid"},[e("label",[t._v("Textarea with error")]),t._v(" "),e("md-textarea"),t._v(" "),e("span",{staticClass:"md-error"},[t._v("Textarea validation message")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Character counter"}},[e("div",{slot:"demo"},[e("form",{attrs:{novalidate:""},on:{submit:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-input-container",[e("label",[t._v("Textarea")]),t._v(" "),e("md-textarea",{attrs:{maxlength:"70"}})]),t._v(" "),e("md-input-container",[e("label",[t._v("Input")]),t._v(" "),e("md-input",{attrs:{maxlength:"20"}})])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Themes"}},[e("div",{slot:"demo"},[e("form",{attrs:{novalidate:""},on:{submit:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-input-container",{attrs:{"md-theme":"green"}},[e("label",[t._v("Green - Input")]),t._v(" "),e("md-input")]),t._v(" "),e("md-input-container",{attrs:{"md-theme":"red"}},[e("label",[t._v("Red - Textarea")]),t._v(" "),e("md-textarea")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n ')])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-card",class:[t.themeClass,t.classes]},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-menu-content",class:[t.themeClass],attrs:{tabindex:"-1"},on:{keydown:[function(e){t._k(e.keyCode,"esc",27)||(e.preventDefault(),t.close(e))},function(e){t._k(e.keyCode,"tab",9)||(e.preventDefault(),t.close(e))},function(e){t._k(e.keyCode,"up",38)||(e.preventDefault(),t.highlightItem("up"))},function(e){t._k(e.keyCode,"down",40)||(e.preventDefault(),t.highlightItem("down"))},function(e){t._k(e.keyCode,"enter",13)||(e.preventDefault(),t.fireClick(e))},function(e){t._k(e.keyCode,"space",32)||(e.preventDefault(),t.fireClick(e))}]}},[e("md-list",[t._t("default")],!0)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("input",{staticClass:"md-input",attrs:{type:t.type,disabled:t.disabled,required:t.required,placeholder:t.placeholder,maxlength:t.maxlength},domProps:{value:t.value},on:{focus:t.onFocus,blur:t.onBlur,input:t.onInput,keydown:[function(e){t._k(e.keyCode,"up",38)||t.onInput(e)},function(e){t._k(e.keyCode,"down",40)||t.onInput(e)}]}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("td",{staticClass:"md-table-cell",class:t.classes},[e("div",{staticClass:"md-table-cell-container"},[t._t("default")],!0)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("md-list-item",{staticClass:"md-menu-item",class:t.classes,attrs:{disabled:t.disabled},on:{click:t.close}},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Checkbox"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Checkboxes allow the user to select multiple options from a set.")]),t._v(" "),e("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[t._v("md-primary")])]),t._v(" "),e("li",[e("code",[t._v("md-warn")])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-checkbox"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("v-model")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("A required model object to bind the value.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("name")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Set the checkbox name.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("id")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Set the checkbox id.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("disabled")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Disable the checkbox and prevent his actions. Default "),e("code",[t._v("false")])])])])]),t._v(" "),e("md-table",{slot:"events"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Value")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("change")]),t._v(" "),e("md-table-cell",[t._v("Receive the state of the checkbox")]),t._v(" "),e("md-table-cell",[t._v("Triggered when the checkbox changes his value.")])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{slot:"demo"},[e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox,expression:"checkbox"}],attrs:{id:"my-test1",name:"my-test1"},domProps:{value:t.checkbox},on:{input:function(e){t.checkbox=e}}},[t._v("Regular Checkbox")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox,expression:"checkbox"}],staticClass:"md-primary",attrs:{id:"my-test2",name:"my-test2"},domProps:{value:t.checkbox},on:{input:function(e){t.checkbox=e}}},[t._v("Primary Color")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox,expression:"checkbox"}],staticClass:"md-warn",attrs:{id:"my-test3",name:"my-test3"},domProps:{value:t.checkbox},on:{input:function(e){t.checkbox=e}}},[t._v("Warn Color")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox,expression:"checkbox"}],attrs:{id:"my-test4",name:"my-test4",disabled:""},domProps:{value:t.checkbox},on:{input:function(e){t.checkbox=e}}},[t._v("Disabled")])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n Regular Checkbox\n Primary Color\n Warn Color\n Disabled\n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Themes"}},[e("div",{slot:"demo"},[e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox2,expression:"checkbox2"}],staticClass:"md-primary",attrs:{"md-name":"orange",id:"my-test5",name:"my-test5"},domProps:{value:t.checkbox2},on:{input:function(e){t.checkbox2=e}}},[t._v("Primary Orange")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox2,expression:"checkbox2"}],staticClass:"md-primary",attrs:{"md-name":"green",id:"my-test6",name:"my-test6"},domProps:{value:t.checkbox2},on:{input:function(e){t.checkbox2=e}}},[t._v("Primary Green")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox2,expression:"checkbox2"}],staticClass:"md-primary",attrs:{"md-name":"light-blue",id:"my-test7",name:"my-test7"},domProps:{value:t.checkbox2},on:{input:function(e){t.checkbox2=e}}},[t._v("Primary Light Blue")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox2,expression:"checkbox2"}],staticClass:"md-primary",attrs:{"md-name":"indigo",id:"my-test8",name:"my-test8"},domProps:{value:t.checkbox2},on:{input:function(e){t.checkbox2=e}}},[t._v("Primary Indigo")]),t._v(" "),e("md-checkbox",{directives:[{name:"model",rawName:"v-model",value:t.checkbox2,expression:"checkbox2"}],staticClass:"md-primary",attrs:{"md-name":"brown",id:"my-test9",name:"my-test9",disabled:""},domProps:{value:t.checkbox2},on:{input:function(e){t.checkbox2=e}}},[t._v("Primary Brown Disabled")])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n Primary Orange\n Primary Green\n Primary Light Blue\n Primary Indigo\n Primary Brown Disabled\n ')])])])])])]);
-},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-card-media",class:t.classes},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("textarea",{staticClass:"md-input",attrs:{disabled:t.disabled,required:t.required,placeholder:t.placeholder,maxlength:t.maxlength},domProps:{value:t.value},on:{focus:t.onFocus,blur:t.onBlur,input:t.onInput}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"UI Elements - Layout"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.")]),t._v(" "),e("p",[t._v("By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the "),e("code",[t._v("md-gutter")]),t._v(" property. If you want the automatic calculation the engine will set "),e("code",[t._v("16px")]),t._v(" for small screens and then apply "),e("code",[t._v("24px")]),t._v(" for medium to large.")]),t._v(" "),e("p",[t._v("You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.")]),t._v(" "),e("p",[t._v("The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:")]),t._v(" "),e("md-table",{staticClass:"properties",slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Size")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[e("code",[t._v("xsmall")])]),t._v(" "),e("md-table-cell",[t._v("600px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("small")])]),t._v(" "),e("md-table-cell",[t._v("960px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("medium")])]),t._v(" "),e("md-table-cell",[t._v("1280px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("large")])]),t._v(" "),e("md-table-cell",[t._v("1920px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 1280px and 1920px wide. For large desktop monitors.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("xlarge")])]),t._v(" "),e("md-table-cell",[t._v(">1920px")]),t._v(" "),e("md-table-cell",[t._v("For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.")])])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-layout"}},[e("md-table",{staticClass:"properties",slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-tag")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("The output tag. Default "),e("code",[t._v("div")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-gutter")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Apply a gutter space to direct childs of the element that have this property. If "),e("code",[t._v("true")]),t._v(" the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts "),e("code",[t._v("8")]),t._v("|"),e("code",[t._v("16")]),t._v("|"),e("code",[t._v("24")]),t._v("|"),e("code",[t._v("40")]),t._v(". Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-row")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a row container. All child will be side by side.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-row-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a row container on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-row-large")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-column")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a column container. All child will be one underneath the other.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-column-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a column container on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-column-small")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-hide-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-hide-medium")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a flexible child. If "),e("code",[t._v("true")]),t._v(" the child element will grow to fill the empty space available on the parent element. If "),e("code",[t._v("Number")]),t._v(" the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: "),e("code",[t._v("true")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a flexible child on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v('md-flex-small="33"')])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex-offset")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a empty space before the actual child. Accepts the same value of "),e("code",[t._v("md-flex")]),t._v(" Example: "),e("code",[t._v('md-flex-offset="50"')])])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Responsive"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{staticClass:"color-red",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),e("br"),t._v('\n md-flex-small="50" '),e("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),e("md-layout",{staticClass:"color-blue",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),e("br"),t._v('\n md-flex-small="50" '),e("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),e("md-layout",{staticClass:"color-pink",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),e("br"),t._v('\n md-flex-small="50" '),e("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),e("md-layout",{staticClass:"color-teal",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),e("br"),t._v('\n md-flex-small="50" '),e("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),e("md-layout",{staticClass:"color-green",attrs:{"md-flex-small":"100","md-flex-medium":"33","md-hide-xsmall":""}},[e("div",{staticClass:"grid-content"},[t._v('\n md-flex-medium="33" '),e("br"),t._v("\n md-hide-xsmall\n ")])]),t._v(" "),e("md-layout",{staticClass:"color-yellow",attrs:{"md-flex":"","md-flex-medium":"33","md-hide-small":""}},[e("div",{staticClass:"grid-content"},[t._v('\n md-flex-medium="33" '),e("br"),t._v("\n md-hide-small\n ")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n md-flex-xsmall \n md-flex-small="50" \n md-flex-medium="33"\n \n\n \n md-flex-xsmall \n md-flex-small="50" \n md-flex-medium="33"\n \n\n \n md-flex-xsmall \n md-flex-small="50" \n md-flex-medium="33"\n \n\n \n md-flex-xsmall \n md-flex-small="50" \n md-flex-medium="33"\n \n\n \n md-flex-medium="33" \n md-hide-xsmall\n \n\n \n md-flex-medium="33" \n md-hide-small\n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Sizes and Offset"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"33"}}),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout"),t._v(" "),e("md-layout",{attrs:{"md-flex":"33","md-flex-offset":"33"}})]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"75"}}),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"25","md-flex-offset":"25"}}),t._v(" "),e("md-layout",{attrs:{"md-flex":"25"}})])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Direction"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"column-size",attrs:{"md-gutter":""}},[e("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"20"}}),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n \n\n \n \n \n \n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Gutters"}},[e("div",{staticClass:"layout-demo grid gutter",slot:"demo"},[e("md-layout",{staticClass:"no-gutter color"},[e("md-layout"),t._v(" "),e("md-layout")]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":8}},[e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])])]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":"16"}},[e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])])]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":24}},[e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])])]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":40}},[e("md-layout",[e("span",[t._v("40px")])]),t._v(" "),e("md-layout",[e("span",[t._v("40px")])]),t._v(" "),e("md-layout",[e("span",[t._v("40px")])])]),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",[e("span",[t._v("Automatic")])]),t._v(" "),e("md-layout",[e("span",[t._v("Automatic")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n\n \n \n 8px\n \n\n \n 8px\n \n\n \n 8px\n \n\n \n 8px\n \n\n \n 8px\n \n\n \n 8px\n \n \n\n \n \n 16px\n \n\n \n 16px\n \n\n \n 16px\n \n\n \n 16px\n \n\n \n 16px\n \n \n\n \n \n 24px\n \n\n \n 24px\n \n\n \n 24px\n \n\n \n 24px\n \n \n\n \n \n 40px\n \n\n \n 40px\n \n\n \n 40px\n \n \n\n \n \n Automatic\n \n\n \n Automatic\n \n \n ')])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-toolbar",class:[t.themeClass]},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Error"}},[e("div",{staticClass:"main-content"},[e("section",[e("h2",{staticClass:"md-headline"},[t._v("Hmmm. Too bad")]),t._v(" "),e("p",[t._v("Are you searching for a new component? Or maybe you have an question? Get in touch!")]),t._v(" "),e("md-button",{staticClass:"md-primary md-raised",attrs:{href:"mailto:marcosvmmoura@gmail.com?Subject=Vue%20Material%20-%20Question",target:"_blank",rel:"noopener"}},[t._v("E-mail")]),t._v(" "),e("md-button",{staticClass:"md-primary md-raised",attrs:{href:"https://github.com/marcosmoura/vue-material/issues/new",target:"_blank",rel:"noopener"}},[t._v("New Issue")])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Switch"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.")]),t._v(" "),e("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[t._v("md-primary")])]),t._v(" "),e("li",[e("code",[t._v("md-warn")])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-switch"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("v-model")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("A required model object to bind the value.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("type")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Sets the type. Default "),e("code",[t._v("button")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("name")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Set the switch name.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("id")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Set the switch id.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("disabled")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Disable the switch and prevent his actions. Default "),e("code",[t._v("false")])])])])]),t._v(" "),e("md-table",{slot:"events"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Value")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("change")]),t._v(" "),e("md-table-cell",[t._v("Receive the state of the switch")]),t._v(" "),e("md-table-cell",[t._v("Triggered when the switch changes his value.")])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{slot:"demo"},[e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked0,expression:"checked0"}],attrs:{id:"my-test0",name:"my-test0"},domProps:{value:t.checked0},on:{input:function(e){t.checked0=e}}})]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked1,expression:"checked1"}],staticClass:"md-primary",attrs:{id:"my-test1",name:"my-test1"},domProps:{value:t.checked1},on:{input:function(e){t.checked1=e}}},[t._v("Primary Color")])]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked2,expression:"checked2"}],staticClass:"md-warn",attrs:{id:"my-test2",name:"my-test2"},domProps:{value:t.checked2},on:{input:function(e){t.checked2=e}}},[t._v("Warn Color")])]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked3,expression:"checked3"}],attrs:{id:"my-test3",name:"my-test3",disabled:""},domProps:{value:t.checked3},on:{input:function(e){t.checked3=e}}},[t._v("Disabled")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n Primary Color\n Warn Color\n Disabled\n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"With type"}},[e("div",{slot:"demo"},[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked8,expression:"checked8"}],attrs:{id:"my-test8",name:"my-test8"},domProps:{value:t.checked8},on:{input:function(e){t.checked8=e}}},[t._v("Default")]),t._v(" "),e("form",{on:{click:function(e){e.stopPropagation(),e.preventDefault(),t.submit(e)}}},[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked9,expression:"checked9"}],staticClass:"md-primary",attrs:{type:"submit",id:"my-test9",name:"my-test9"},domProps:{value:t.checked9},on:{input:function(e){t.checked9=e}}},[t._v("Submit")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n Default\n\n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Themes"}},[e("div",{slot:"demo"},[e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked4,expression:"checked4"}],staticClass:"md-primary",attrs:{"md-theme":"orange",id:"my-test4",name:"my-test4"},domProps:{value:t.checked4},on:{input:function(e){t.checked4=e}}})]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked5,expression:"checked5"}],staticClass:"md-primary",attrs:{"md-theme":"green",id:"my-test5",name:"my-test5"},domProps:{value:t.checked5},on:{input:function(e){t.checked5=e}}},[t._v("Green Primary Color")])]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked6,expression:"checked6"}],staticClass:"md-primary",attrs:{"md-theme":"brown",id:"my-test6",name:"my-test6"},domProps:{value:t.checked6},on:{input:function(e){t.checked6=e}}},[t._v("Brown Primary Color")])]),t._v(" "),e("div",[e("md-switch",{directives:[{name:"model",rawName:"v-model",value:t.checked7,expression:"checked7"}],staticClass:"md-primary",attrs:{"md-theme":"light-blue",id:"my-test7",name:"my-test7",disabled:""},domProps:{value:t.checked7},on:{input:function(e){t.checked7=e}}},[t._v("Light Blue Primary Color Disabled")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n Green Primary Color\n Brown Primary Color\n Light Blue Primary Color Disabled\n ')])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-dialog-actions"},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Card"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._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.")]),t._v(" "),e("p",[t._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.")]),t._v(" "),e("p",[t._v('You can also use other Material components inside the card, like the "Complete Example".')]),t._v(" "),e("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[t._v("md-primary")])]),t._v(" "),e("li",[e("code",[t._v("md-accent")])]),t._v(" "),e("li",[e("code",[t._v("md-warn")])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-card"}},[e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-with-hover")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Enable full hover elevation in card. Default "),e("code",[t._v("false")])])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-card-header"}},[e("p",[t._v("Can display titles, subheads, medias and avatars in a header.")]),t._v(" "),e("p",[t._v("No options available")])]),t._v(" "),e("api-table",{attrs:{name:"md-card-header-text"}},[e("p",[t._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.')]),t._v(" "),e("p",[t._v("No options available")])]),t._v(" "),e("api-table",{attrs:{name:"md-card-content"}},[e("p",[t._v("Display the content of the card. Most used with plain text or with simple HTML content, like bold and italic tags.")]),t._v(" "),e("p",[t._v("No options available")])]),t._v(" "),e("api-table",{attrs:{name:"md-card-actions"}},[e("p",[t._v("Hold the actions of a card align them on the right. Here you can add "),e("code",[t._v("")]),t._v(" with or without icons.")]),t._v(" "),e("p",[t._v("No options available")])]),t._v(" "),e("api-table",{attrs:{name:"md-card-area"}},[e("div",{slot:"properties"},[e("p",[t._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).")]),t._v(" "),e("p",[t._v('You can see an example of use on the "Complete example".')]),t._v(" "),e("md-table",[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-inset")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Apply a inset border. Default "),e("code",[t._v("false")])])])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-card-media"}},[e("div",{slot:"properties"},[e("p",[t._v("The card media display images (and other types of media) inside cards. Can be used inside and outsite a card header.")]),t._v(" "),e("md-table",[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-ratio")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Resize or clip the image automatically based on the following options: "),e("br"),t._v("1:1 or 1/1, 4:3 or 4/3 and 16:9 or 16/9.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-medium")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Applies medium size to the media. Works only inside md-card-header. Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-big")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Applies big size to the media. Works only inside md-card-header. Default "),e("code",[t._v("false")])])])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-card-media-actions"}},[e("p",[t._v("Used to align a media and actions side by side.")]),t._v(" "),e("p",[t._v("No options available")])]),t._v(" "),e("api-table",{attrs:{name:"md-card-media-cover"}},[e("div",{slot:"properties"},[e("p",[t._v("You will need to give a "),e("code",[t._v("")]),t._v(" inside this component and a "),e("code",[t._v("")]),t._v(". The media and the area will be automatically be placed in order inside the card.")]),t._v(" "),e("p",[t._v('Take a look at the example: "Image cover with predefined aspect ratio".')]),t._v(" "),e("md-table",[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-text-scrim")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Apply a gradient background based on the image. This option increase the legibility of the text applying background colors by extracting the amount of lightness on the image. If the image is dark so the background of the text will be lighter. If it's not dark then the background will be darker. This will be calculated automatically. Default "),e("code",[t._v("false")])])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-solid")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Applies a solid background with the same calculation logic of the md-text-scrim. Default "),e("code",[t._v("false")])])])])])])]),t._v(" "),e("api-table",{
-attrs:{name:"md-card-expand"}},[e("p",[t._v('Create a expansible content area inside cards. Useful to "show more" content or load them on demand.')]),t._v(" "),e("p",[t._v("You will need a "),e("code",[t._v("")]),t._v(" with an element with a "),e("code",[t._v("md-expand-trigger")]),t._v(" attribute and a "),e("code",[t._v("")]),t._v(" with the content that you want to show. The trigger will automatically toggle the content on click.")]),t._v(" "),e("p",[t._v("A simple HTML markup can be like that:")]),t._v(" "),e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n keyboard_arrow_down\n \n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n \n \n ')]),t._v(" "),e("p",[t._v("No options available")])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Regular Cards"}},[e("div",{staticClass:"card-holder",slot:"demo"},[e("md-card",[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])]),t._v(" "),e("md-card",[e("md-card-header",[e("md-card-header-text",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-menu",{attrs:{"md-size":"4","md-direction":"bottom left"}},[e("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[e("md-icon",[t._v("more_vert")])]),t._v(" "),e("md-menu-content",[e("md-menu-item",[e("span",[t._v("Call")]),t._v(" "),e("md-icon",[t._v("phone")])]),t._v(" "),e("md-menu-item",[e("span",[t._v("Send a message")]),t._v(" "),e("md-icon",[t._v("message")])])])])]),t._v(" "),e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])]),t._v(" "),e("md-card",[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n ")])]),t._v(" "),e("md-card",[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n Action\n Action\n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n\n \n \n \n
Title goes here
\n
Subtitle here
\n \n\n \n \n more_vert\n \n\n \n \n Call\n phone\n \n\n \n Send a message\n message\n \n \n \n \n\n \n \n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n\n \n \n \n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n \n \n\n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n Action\n Action\n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Hover Effect"}},[e("div",{staticClass:"card-holder",slot:"demo"},[e("md-card",{attrs:{"md-with-hover":""}},[e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])])]),t._v(" "),e("md-card",{attrs:{"md-with-hover":""}},[e("md-card-media",{directives:[{name:"md-ink-ripple",rawName:"v-md-ink-ripple"}]},[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-actions",[e("md-button",{staticClass:"md-icon-button"},[e("md-icon",[t._v("favorite")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button"},[e("md-icon",[t._v("bookmark")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button"},[e("md-icon",[t._v("share")])])])]),t._v(" "),e("md-card",{attrs:{"md-with-hover":""}},[e("md-card-header",[e("md-avatar",[e("img",{attrs:{src:"assets/avatar.png",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n ")]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n
Title goes here
\n
Subtitle here
\n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n\n \n Action\n Action\n \n \n\n \n \n \n \n\n \n \n favorite\n \n\n \n bookmark\n \n\n \n share\n \n \n \n\n \n \n \n \n \n\n
\n \n\n \n \n \n \n\n \n Action\n Action\n \n \n\n \n \n \n \n \n\n \n \n favorite\n \n\n \n bookmark\n \n\n \n share\n \n \n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Full Control"}},[e("div",{staticClass:"card-holder",slot:"demo"},[e("md-card",[e("md-card-area",[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])])]),t._v(" "),e("md-card",[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-expand",[e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")]),t._v(" "),e("span",{staticStyle:{flex:"1"}}),t._v(" "),e("md-button",{staticClass:"md-icon-button",attrs:{"md-expand-trigger":""}},[e("md-icon",[t._v("keyboard_arrow_down")])])]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n\n \n Action\n Action\n \n \n\n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n \n Action\n Action\n \n \n keyboard_arrow_down\n \n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Themes"}},[e("div",{staticClass:"card-holder",slot:"demo"},[e("md-card",{staticClass:"md-primary"},[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])]),t._v(" "),e("md-card",{staticClass:"md-accent"},[e("md-card-header",[e("md-card-header-text",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-menu",{attrs:{"md-size":"4","md-direction":"bottom left"}},[e("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[e("md-icon",[t._v("more_vert")])]),t._v(" "),e("md-menu-content",[e("md-menu-item",[e("span",[t._v("Call")]),t._v(" "),e("md-icon",[t._v("phone")])]),t._v(" "),e("md-menu-item",[e("span",[t._v("Send a message")]),t._v(" "),e("md-icon",[t._v("message")])])])])]),t._v(" "),e("md-card-media",[e("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),e("md-card-content",[t._v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n ")])]),t._v(" "),e("md-card",{staticClass:"md-warn"},[e("md-card-media",[e("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),e("md-card-header",[e("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),e("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),e("md-card-actions",[e("md-button",[t._v("Action")]),t._v(" "),e("md-button",[t._v("Action")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n Action\n Action\n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n\n \n \n \n
Title goes here
\n
Subtitle here
\n \n\n \n \n more_vert\n \n\n \n \n Call\n phone\n \n\n \n Send a message\n message\n \n \n \n \n\n \n \n \n\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n \n \n\n \n \n \n \n\n \n
Title goes here
\n
Subtitle here
\n \n\n \n Action\n Action\n \n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Complete Example"}},[e("div",{staticClass:"card-holder",slot:"demo"},[e("md-card",{staticClass:"card-example"},[e("md-card-area",{attrs:{"md-inset":""}},[e("md-card-media",{attrs:{"md-ratio":"16:9"}},[e("img",{attrs:{src:"assets/card-example.jpg",alt:"Coffee House"}})]),t._v(" "),e("md-card-header",[e("h2",{staticClass:"md-title"},[t._v("Coffee House")]),t._v(" "),e("div",{staticClass:"md-subhead"},[e("md-icon",[t._v("location_on")]),t._v(" "),e("span",[t._v("2 miles")])])]),t._v(" "),e("md-card-content",[t._v("\n Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n ")])]),t._v(" "),e("md-card-content",[e("h3",{staticClass:"md-subheading"},[t._v("Today's availability")]),t._v(" "),e("div",{staticClass:"card-reservation"},[e("md-icon",[t._v("access_time")]),t._v(" "),e("md-button-toggle",{staticClass:"md-button-group",attrs:{"md-single":""}},[e("md-button",[t._v("5:30PM")]),t._v(" "),e("md-button",[t._v("7:30PM")]),t._v(" "),e("md-button",[t._v("9:00PM")])])])]),t._v(" "),e("md-card-actions",[e("md-button",{staticClass:"md-primary"},[t._v("Reserve")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n \n \n\n \n
Coffee House
\n
\n location_on\n 2 miles\n
\n \n\n \n Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n \n \n\n \n
Today\'s availability
\n
\n access_time\n \n 5:30PM\n 7:30PM\n 9:00PM\n \n
\n \n\n \n Reserve\n \n \n ')]),t._v(" "),e("code-block",{attrs:{lang:"scss"}},[t._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 ")])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("md-dialog",{ref:"dialog",staticClass:"md-dialog-confirm",on:{close:function(e){t.fireCloseEvent("cancel")}}},[t.mdTitle?e("md-dialog-title",[t._v(t._s(t.mdTitle))]):t._e(),t._v(" "),t.mdContentHtml?e("md-dialog-content",{domProps:{innerHTML:t._s(t.mdContentHtml)}}):e("md-dialog-content",[t._v(t._s(t.mdContent))]),t._v(" "),t._v(" "),e("md-dialog-actions",[e("md-button",{staticClass:"md-primary",on:{click:function(e){t.close("cancel")}}},[t._v(t._s(t.mdCancelText))]),t._v(" "),e("md-button",{staticClass:"md-primary",on:{click:function(e){t.close("ok")}}},[t._v(t._s(t.mdOkText))])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Sidenav"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("The sidenav spans the height of the screen, with everything behind it visible but darkened by a backdrop.")])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-sidenav"}},[e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-left")]),t._v(" "),e("md-table-cell",[t._v("Display the sidenav on the left of parent")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-right")]),t._v(" "),e("md-table-cell",[t._v("Display the sidenav on the right of parent")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-fixed")]),t._v(" "),e("md-table-cell",[t._v("Apply position fixed")])])])]),t._v(" "),e("md-table",{
-slot:"events"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Value")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("open")]),t._v(" "),e("md-table-cell",[t._v("None")]),t._v(" "),e("md-table-cell",[t._v("Triggered when the sidenav starts to open.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("close")]),t._v(" "),e("md-table-cell",[t._v("None")]),t._v(" "),e("md-table-cell",[t._v("Triggered when the sidenav starts to close.")])])])]),t._v(" "),e("md-table",{slot:"methods"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("open")]),t._v(" "),e("md-table-cell",[t._v("Open the sidenav.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("close")]),t._v(" "),e("md-table-cell",[t._v("Close the sidenav.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("toggle")]),t._v(" "),e("md-table-cell",[t._v("Toggle the sidenav.")])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{slot:"demo"},[e("div",{staticClass:"phone-viewport"},[e("md-toolbar",[e("md-button",{staticClass:"md-icon-button",on:{click:t.toggleLeftSidenav}},[e("md-icon",[t._v("menu")])]),t._v(" "),e("h2",{staticClass:"md-title"},[t._v("My App")])]),t._v(" "),e("div",[e("md-button",{staticClass:"md-raised md-accent",on:{click:t.toggleRightSidenav}},[t._v("Toggle right")]),t._v(" "),e("p",[t._v("Open console to see the events")])]),t._v(" "),e("md-sidenav",{ref:"leftSidenav",staticClass:"md-left",on:{open:function(e){t.open("Left")},close:function(e){t.close("Left")}}},[e("md-toolbar",{staticClass:"md-large"},[e("div",{staticClass:"md-toolbar-container"},[e("h3",{staticClass:"md-title"},[t._v("Sidenav content")])])]),t._v(" "),e("p",[t._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!")])]),t._v(" "),e("md-sidenav",{ref:"rightSidenav",staticClass:"md-right",on:{open:function(e){t.open("Right")},close:function(e){t.close("Right")}}},[e("md-toolbar",[e("div",{staticClass:"md-toolbar-container"},[e("h3",{staticClass:"md-title"},[t._v("Sidenav content")])])]),t._v(" "),e("md-button",{staticClass:"md-raised md-accent",on:{click:t.closeRightSidenav}},[t._v("Close")])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n
\n \n \n menu\n \n\n
My App
\n \n\n
\n Toggle right\n
Open console to see the events
\n
\n\n \n \n
\n
Sidenav content
\n
\n \n\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!
\n \n\n \n \n
\n
Sidenav content
\n
\n \n\n Close\n \n
\n ')]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n export default {\n methods: {\n toggleLeftSidenav() {\n this.$refs.leftSidenav.toggle();\n },\n toggleRightSidenav() {\n this.$refs.rightSidenav.toggle();\n },\n closeRightSidenav() {\n this.$refs.rightSidenav.close();\n },\n open(ref) {\n console.log('Opened: ' + ref);\n },\n close(ref) {\n console.log('Closed: ' + ref);\n }\n }\n };\n ")])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Avatar"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent brand.")]),t._v(" "),e("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[t._v("md-primary")])]),t._v(" "),e("li",[e("code",[t._v("md-accent")])]),t._v(" "),e("li",[e("code",[t._v("md-warn")])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-avatar"}},[e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-avatar-icon")]),t._v(" "),e("md-table-cell",[t._v("Display an icon using md-icon component")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-large")]),t._v(" "),e("md-table-cell",[t._v("Display large avatar")])])])])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{staticClass:"avatar-holder",slot:"demo"},[e("md-avatar",[e("img",{attrs:{src:"assets/avatar.png",alt:"Avatar"}})]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon"},[e("md-icon",[t._v("home")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-primary"},[e("md-icon",[t._v("folder")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-accent"},[e("md-icon",[t._v("favorite")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-warn"},[e("md-icon",[t._v("notes")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n\n \n home\n \n\n \n folder\n \n\n \n favorite\n \n\n \n notes\n \n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Large"}},[e("div",{staticClass:"avatar-holder",slot:"demo"},[e("md-avatar",{staticClass:"md-large"},[e("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-large"},[e("md-icon",[t._v("home")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-large md-primary"},[e("md-icon",[t._v("folder")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-large md-accent"},[e("md-icon",[t._v("favorite")])]),t._v(" "),e("md-avatar",{staticClass:"md-avatar-icon md-large md-warn"},[e("md-icon",[t._v("notes")])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n \n \n \n\n \n home\n \n\n \n folder\n \n\n \n favorite\n \n\n \n notes\n \n ')])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-card-actions"},[t._t("default")],!0)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Themes - Configuration"}},[e("article",{staticClass:"main-content"},[e("section",[e("h2",{staticClass:"md-headline"},[t._v("Theme Engine")]),t._v(" "),e("p",[t._v("When you create a theme the Vue Material will generate all of the styles ondemand so you don't need to create any css file to create them. Everything is generated when the API is called and this is great because you can create a theme anytime you want. After that you can use the declarative directive to apply the theme inside an element.")]),t._v(" "),e("p",[t._v("Most of the components of Vue Material can change it's colors. Every theme has Primary, Accent, Warn and Background colors. Some components also have a Transparent variation to make your layouts cleaner and easy to place on top of another element. E.g. Tabs inside toolbars.")]),t._v(" "),e("p",[t._v("Vue Material use classes to apply those color intentions: "),e("code",[t._v("md-primary")]),t._v(", "),e("code",[t._v("md-accent")]),t._v(", "),e("code",[t._v("md-warn")]),t._v(" and "),e("code",[t._v("md-transparent")]),t._v(". The background color is applied automaticaly.")])]),t._v(" "),e("section",[e("h2",{staticClass:"md-headline"},[t._v("Color Intentions")]),t._v(" "),e("p",[t._v("Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.")]),t._v(" "),e("p",[t._v("Theming allows changing the color of your application. The "),e("a",{attrs:{href:"https://material.google.com/style/color.html#color-color-palette",target:"_blank",rel:"noopener"}},[t._v("Material Design palette")]),t._v(" can be fully applied using Vue Material. You can pass all intentions or just change the intention that you want. The default colors are:")]),t._v(" "),e("ul",[e("li",[t._v("primary - indigo")]),t._v(" "),e("li",[t._v("accent - pink")]),t._v(" "),e("li",[t._v("warn - deep-orange")]),t._v(" "),e("li",[t._v("background - grey")])]),t._v(" "),e("p",[t._v("All of those colors can be applied to create a theme.")]),t._v(" "),e("ul",[e("li",[t._v("red")]),t._v(" "),e("li",[t._v("pink")]),t._v(" "),e("li",[t._v("purple")]),t._v(" "),e("li",[t._v("deep-purple")]),t._v(" "),e("li",[t._v("indigo")]),t._v(" "),e("li",[t._v("blue")]),t._v(" "),e("li",[t._v("light-blue")]),t._v(" "),e("li",[t._v("cyan")]),t._v(" "),e("li",[t._v("teal")]),t._v(" "),e("li",[t._v("green")]),t._v(" "),e("li",[t._v("light-green")]),t._v(" "),e("li",[t._v("lime")]),t._v(" "),e("li",[t._v("yellow")]),t._v(" "),e("li",[t._v("amber")]),t._v(" "),e("li",[t._v("orange")]),t._v(" "),e("li",[t._v("deep-orange")]),t._v(" "),e("li",[t._v("brown")]),t._v(" "),e("li",[t._v("grey")]),t._v(" "),e("li",[t._v("blue-grey")]),t._v(" "),e("li",[t._v("white")]),t._v(" "),e("li",[t._v("black")])])]),t._v(" "),e("section",[e("h3",{staticClass:"md-headline"},[t._v("Registering themes")]),t._v(" "),e("p",[t._v("The default colors will be applied without any change in your code base. But you can change the colors of the "),e("code",[t._v("default")]),t._v(" theme calling the Vue Material API.")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n Vue.material.registerTheme('default', {\n primary: 'blue',\n accent: 'red',\n warn: 'red',\n background: 'grey'\n })\n ")])]),t._v(" "),e("section",[e("h3",{staticClass:"md-headline"},[t._v("Multiple themes")]),t._v(" "),e("p",[t._v("\n You can call the "),e("code",[t._v("registerTheme")]),t._v(" function how many times you want. However you can pass an object containing all the themes that you need to create:\n ")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n Vue.material.registerTheme({\n app: {\n primary: 'cyan'\n },\n about: {\n primary: 'indigo'\n },\n contact: {\n primary: 'teal'\n }\n })\n ")]),t._v(" "),e("small",[t._v("Note: If you do not pass all the colors the theme will inherit the "),e("strong",[t._v("default colors")]),t._v(".")])]),t._v(" "),e("section",[e("h3",{staticClass:"md-headline"},[t._v("Custom Shades")]),t._v(" "),e("p",[t._v("To have a full use of the Material Design palette you can specify different shades for each color:")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n Vue.material.registerTheme('about', {\n primary: {\n color: 'indigo',\n hue: 'A200'\n },\n accent: {\n color: 'grey',\n hue: 300\n }\n })\n ")])]),t._v(" "),e("section",[e("h3",{staticClass:"md-headline"},[t._v("Applying a theme")]),t._v(" "),e("p",[t._v("To change the current theme in your application just call the "),e("code",[t._v("setCurrentTheme")]),t._v(" method from anywhere in your application:")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n Vue.material.setCurrentTheme('about')\n ")]),t._v(" "),e("p",[t._v("Or inside a Vue instance:")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n this.$material.setCurrentTheme('about')\n ")])]),t._v(" "),e("section",[e("h3",{staticClass:"md-headline"},[t._v("Codepen example")]),t._v(" "),e("iframe",{staticStyle:{width:"100%"},attrs:{height:"550",scrolling:"no",title:"Theme Example",src:"//codepen.io/vue-material/embed/WGavBE/?height=550&theme-id=dark&default-tab=html,result&embed-version=2",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[t._v("See the Pen "),e("a",{attrs:{href:"http://codepen.io/vue-material/pen/WGavBE/"}},[t._v("Theme Example")]),t._v(" by Vue Material ("),e("a",{attrs:{href:"http://codepen.io/vue-material"}},[t._v("@vue-material")]),t._v(") on "),e("a",{attrs:{href:"http://codepen.io"}},[t._v("CodePen")]),t._v(".")])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-dialog-container",class:[t.themeClass,t.classes],attrs:{tabindex:"0"},on:{keyup:function(e){t._k(e.keyCode,"esc",27)||(e.stopPropagation(),t.closeOnEsc(e))}}},[e("div",{ref:"dialog",staticClass:"md-dialog",class:t.dialogClasses,style:t.styles},[t._t("default")],!0),t._v(" "),t.mdBackdrop?e("md-backdrop",{ref:"backdrop",staticClass:"md-dialog-backdrop",class:t.classes,on:{close:function(e){t.mdClickOutsideToClose&&t.close()}}}):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - Toolbar"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Toolbars appear a step above the content they affect. They may constrain their width to accommodate material passing over them.")]),t._v(" "),e("p",[t._v("You need to wrap all the elements of your toolbar in a element with the class "),e("code",[t._v("md-toolbar-container")]),t._v(" for medium and large toolbars. On large toolbars you can have two containers to push content to bottom.")]),t._v(" "),e("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),e("ul",{staticClass:"md-body-2"},[e("li",[e("code",[t._v("md-accent")])]),t._v(" "),e("li",[e("code",[t._v("md-warn")])]),t._v(" "),e("li",[e("code",[t._v("md-transparent")])])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-toolbar"}},[e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-dense")]),t._v(" "),e("md-table-cell",[t._v("Create a small and dense toolbar.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-medium")]),t._v(" "),e("md-table-cell",[t._v("Create a medium.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-large")]),t._v(" "),e("md-table-cell",[t._v("Create a large.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-account-header")]),t._v(" "),e("md-table-cell",[t._v("Create a account header toolbar to show user accounts inside sidenav. See example below and the complete example")])])])])]),t._v(" "),e("api-table",[e("code-block",{attrs:{lang:"xml",height:"none"}},[t._v('\n \n \n \n \n \n \n\n \n\n \n \n \n\n \n \n \n \n\n \n
\n ")]),t._v(" "),e("code-block",{attrs:{lang:"javascript"}},[t._v("\n export default {\n data: () => ({\n food: '',\n users: [\n 'jim_halpert',\n 'michael_scott'\n ]\n })\n };\n ")])])])])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("transition",{attrs:{name:"md-spinner",appear:""}},[e("div",{staticClass:"md-spinner",class:[t.themeClass,t.classes],style:t.styles},[e("svg",{staticClass:"md-spinner-draw",attrs:{viewBox:"25 25 50 50"}},[e("circle",{staticClass:"md-spinner-path",attrs:{cx:"50",cy:"50",r:"20","stroke-width":t.mdStroke,"stroke-dasharray":t.dashProgress}})])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("div",{staticClass:"md-table-pagination"},[e("span",{staticClass:"md-table-pagination-label"},[t._v(t._s(t.mdLabel)+":")]),t._v(" "),t.mdPageOptions?e("md-select",{directives:[{name:"model",rawName:"v-model",value:t.currentSize,expression:"currentSize"}],attrs:{"md-menu-class":"md-pagination-select"},domProps:{value:t.currentSize},on:{change:t.changeSize,input:function(e){t.currentSize=e}}},t._l(t.mdPageOptions,function(n){return e("md-option",{attrs:{value:n}},[t._v(t._s(n))])})):t._e(),t._v(" "),e("span",[t._v(t._s((t.currentPage-1)*t.currentSize+1)+"-"+t._s(t.subTotal)+" "+t._s(t.mdSeparator)+" "+t._s(t.mdTotal))]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-table-pagination-previous",attrs:{disabled:1===t.currentPage},on:{click:t.previousPage}},[e("md-icon",[t._v("keyboard_arrow_left")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-table-pagination-next",attrs:{disabled:t.currentSize*t.currentPage>=t.totalItems},on:{click:t.nextPage}},[e("md-icon",[t._v("keyboard_arrow_right")])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=(t.$createElement,t._c);return e("page-content",{attrs:{"page-title":"Components - List"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("md-list")]),t._v(" component have some auxiliary classes to align content and display actions. All of them can be any HTML tag:")]),t._v(" "),e("ul",[e("li",[e("code",[t._v(".md-list-action")]),t._v(": Used to display a action on the right side of a list item. Commonly used to display a button with a single action.")]),t._v(" "),e("li",[e("code",[t._v(".md-list-text-container")]),t._v(": Used to align text horizontally with icons and actions. Used in double and triple lines.")]),t._v(" "),e("li",[e("code",[t._v(".md-divider")]),t._v(": Add a horizontal line between list items.")])])]),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-list"}},[e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-dense")]),t._v(" "),e("md-table-cell",[t._v("Make the list dense and compact")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-double-line")]),t._v(" "),e("md-table-cell",[t._v("Make list items to support double line")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-triple-line")]),t._v(" "),e("md-table-cell",[t._v("Make list items to support triple line")])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-list-item"}},[e("p",[t._v("Display a single item inside lists")]),t._v(" "),e("md-table",{slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("href")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("The link that the item should redirect to.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("target")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("The target for opening the href link. Normally used for "),e("code",[t._v("_blank")]),t._v(" cases.")])]),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("disabled")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Disable the item and prevent his actions. Default "),e("code",[t._v("false")])])])])]),t._v(" "),e("md-table",{slot:"classes"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Description")])])]),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-inset")]),t._v(" "),e("md-table-cell",[t._v("Add an empty space on the left of the table. "),e("br"),t._v("Useful to show list items without icons aligned with another that have an icon.")])])])])]),t._v(" "),e("api-table",{attrs:{name:"md-list-expand"}},[e("p",[t._v("Create a expansion accordion automatically inside lists")]),t._v(" "),e("p",[t._v("No options available")])])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Single Line"}},[e("div",{slot:"demo"},[e("div",{staticClass:"phone-viewport"},[e("md-list",[e("md-list-item",[e("md-icon",[t._v("move_to_inbox")]),t._v(" "),e("span",[t._v("Inbox")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("send")]),t._v(" "),e("span",[t._v("Sent Mail")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("delete")]),t._v(" "),e("span",[t._v("Trash")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("error")]),t._v(" "),e("span",[t._v("Spam")]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),e("span",[t._v("Abbey Christansen")]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])])]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),e("span",[t._v("Alex Nelson")]),t._v(" "),e("md-button",{
-staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])])]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),e("span",[t._v("Mary Johnson")]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("chat_bubble")])])])])]),t._v(" "),e("div",{staticClass:"phone-viewport"},[e("md-list",{staticClass:"md-dense"},[e("md-list-item",[e("md-icon",[t._v("move_to_inbox")]),t._v(" "),e("span",[t._v("Inbox")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("send")]),t._v(" "),e("span",[t._v("Sent Mail")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("delete")]),t._v(" "),e("span",[t._v("Trash")])]),t._v(" "),e("md-list-item",[e("md-icon",[t._v("error")]),t._v(" "),e("span",[t._v("Spam")]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),e("span",[t._v("Abbey Christansen")]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])])]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),e("span",[t._v("Alex Nelson")]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])])]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),e("span",[t._v("Mary Johnson")]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("chat_bubble")])])])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n
\n ')])])]),t._v(" "),e("example-box",{attrs:{"card-title":"Triple Line"}},[e("div",{slot:"demo"},[e("div",{staticClass:"phone-viewport"},[e("md-list",{staticClass:"custom-list md-triple-line"},[e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Ali Connors")]),t._v(" "),e("span",[t._v("Brunch this weekend?")]),t._v(" "),e("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("star")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("me, Scott, Jennifer")]),t._v(" "),e("span",[t._v("Summer BBQ")]),t._v(" "),e("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Sandra Adams")]),t._v(" "),e("span",[t._v("Oui oui")]),t._v(" "),e("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Trevor Hansen")]),t._v(" "),e("span",[t._v("Order confirmation")]),t._v(" "),e("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})])])]),t._v(" "),e("div",{staticClass:"phone-viewport"},[e("md-list",{staticClass:"custom-list md-triple-line md-dense"},[e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Ali Connors")]),t._v(" "),e("span",[t._v("Brunch this weekend?")]),t._v(" "),e("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",{staticClass:"md-primary"},[t._v("star")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("me, Scott, Jennifer")]),t._v(" "),e("span",[t._v("Summer BBQ")]),t._v(" "),e("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Sandra Adams")]),t._v(" "),e("span",[t._v("Oui oui")]),t._v(" "),e("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})]),t._v(" "),e("md-list-item",[e("md-avatar",[e("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),e("div",{staticClass:"md-list-text-container"},[e("span",[t._v("Trevor Hansen")]),t._v(" "),e("span",[t._v("Order confirmation")]),t._v(" "),e("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),e("md-button",{staticClass:"md-icon-button md-list-action"},[e("md-icon",[t._v("star_border")])]),t._v(" "),e("md-divider",{staticClass:"md-inset"})])])])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n
The long time requested feature is here! Vue Material has a new and easy-to-use Grid System. Enjoy!
-
-
Breaking changes:
-
The first breaking change we never forget. The themes engine has changed and it's more simple now. This change make the themes reactive to make the themes dynamic using the theme component or the API. The performance of the engine is waaay better and the theme styles are now fixed and have a better scope.
-
Check all theme changes in the new themes section inside the documentation website. There are some changes in the theme API:
-
-
v-md-theme directive removed
-
The v-md-theme do not exists anymore and should be replaced by the brand new <md-theme> component.
-
-
Register method renamed
-
Vue.material.theme.register changed to Vue.material.registerTheme. This will make the API smore simple and easy to write.
-
-
Register All removed
-
Vue.material.theme.registerAll was removed. The Vue.material.registerTheme function now accepts a object: