vue-material/dist/docs/14.fd41ec35.js

webpackJsonp([14,32],{249:function(e,t,a){t=e.exports=a(1)(),t.push([e.id,"section[data-v-7868a37f]{max-width:960px}section+section[data-v-7868a37f]{margin-top:56px}iframe[data-v-7868a37f]{height:550px}",""])},369:function(e,t,a){var n,o;a(570);var i=a(508);o=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(o=n=n.default),"function"==typeof o&&(o=o.options),o.render=i.render,o.staticRenderFns=i.staticRenderFns,o._scopeId="data-v-7868a37f",e.exports=n},508: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":"Themes - Configuration"}},[a("article",{staticClass:"main-content"},[a("section",[a("h2",{staticClass:"md-headline"},[e._v("Theme Engine")]),e._v(" "),a("p",[e._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.")]),e._v(" "),a("p",[e._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.")]),e._v(" "),a("p",[e._v("Vue Material use classes to apply those color intentions: "),a("code",[e._v("md-primary")]),e._v(", "),a("code",[e._v("md-accent")]),e._v(", "),a("code",[e._v("md-warn")]),e._v(" and "),a("code",[e._v("md-transparent")]),e._v(". The background color is applied automaticaly.")])]),e._v(" "),a("section",[a("h2",{staticClass:"md-headline"},[e._v("Color Intentions")]),e._v(" "),a("p",[e._v("Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.")]),e._v(" "),a("p",[e._v("Theming allows changing the color of your application. The "),a("a",{attrs:{href:"https://material.google.com/style/color.html#color-color-palette",target:"_blank",rel:"noopener"}},[e._v("Material Design palette")]),e._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:")]),e._v(" "),a("ul",[a("li",[e._v("primary - indigo")]),e._v(" "),a("li",[e._v("accent - pink")]),e._v(" "),a("li",[e._v("warn - deep-orange")]),e._v(" "),a("li",[e._v("background - grey")])]),e._v(" "),a("p",[e._v("All of those colors can be applied to create a theme.")]),e._v(" "),a("ul",[a("li",[e._v("red")]),e._v(" "),a("li",[e._v("pink")]),e._v(" "),a("li",[e._v("purple")]),e._v(" "),a("li",[e._v("deep-purple")]),e._v(" "),a("li",[e._v("indigo")]),e._v(" "),a("li",[e._v("blue")]),e._v(" "),a("li",[e._v("light-blue")]),e._v(" "),a("li",[e._v("cyan")]),e._v(" "),a("li",[e._v("teal")]),e._v(" "),a("li",[e._v("green")]),e._v(" "),a("li",[e._v("light-green")]),e._v(" "),a("li",[e._v("lime")]),e._v(" "),a("li",[e._v("yellow")]),e._v(" "),a("li",[e._v("amber")]),e._v(" "),a("li",[e._v("orange")]),e._v(" "),a("li",[e._v("deep-orange")]),e._v(" "),a("li",[e._v("brown")]),e._v(" "),a("li",[e._v("grey")]),e._v(" "),a("li",[e._v("blue-grey")]),e._v(" "),a("li",[e._v("white")]),e._v(" "),a("li",[e._v("black")])])]),e._v(" "),a("section",[a("h3",{staticClass:"md-headline"},[e._v("Registering themes")]),e._v(" "),a("p",[e._v("The default colors will be applied without any change in your code base. But you can change the colors of the "),a("code",[e._v("default")]),e._v(" theme calling the Vue Material API.")]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._v("\n        Vue.material.registerTheme('default', {\n          primary: 'blue',\n          accent: 'red',\n          warn: 'red',\n          background: 'grey'\n        })\n      ")])],1),e._v(" "),a("section",[a("h3",{staticClass:"md-headline"},[e._v("Multiple themes")]),e._v(" "),a("p",[e._v("\n        You can call the "),a("code",[e._v("registerTheme")]),e._v(" function how many times you want. However you can pass an object containing all the themes that you need to create:\n      ")]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._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      ")]),e._v(" "),a("small",[e._v("Note: If you do not pass all the colors the theme will inherit the "),a("strong",[e._v("default colors")]),e._v(".")])],1),e._v(" "),a("section",[a("h3",{staticClass:"md-headline"},[e._v("Custom Shades")]),e._v(" "),a("p",[e._v("To have a full use of the Material Design palette you can specify different shades for each color:")]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._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      ")])],1),e._v(" "),a("section",[a("h3",{staticClass:"md-headline"},[e._v("Applying a theme")]),e._v(" "),a("p",[e._v("To change the current theme in your application just call the "),a("code",[e._v("setCurrentTheme")]),e._v(" method from anywhere in your application:")]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._v("\n        Vue.material.setCurrentTheme('about')\n      ")]),e._v(" "),a("p",[e._v("Or inside a Vue instance:")]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._v("\n        this.$material.setCurrentTheme('about')\n      ")])],1),e._v(" "),a("section",[a("h3",{staticClass:"md-headline"},[e._v("Codepen example")]),e._v(" "),a("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"}},[e._v("See the Pen "),a("a",{attrs:{href:"http://codepen.io/vue-material/pen/WGavBE/"}},[e._v("Theme Example")]),e._v(" by Vue Material ("),a("a",{attrs:{href:"http://codepen.io/vue-material"}},[e._v("@vue-material")]),e._v(") on "),a("a",{attrs:{href:"http://codepen.io"}},[e._v("CodePen")]),e._v(".")])],1)])])},staticRenderFns:[]}},570:function(e,t,a){var n=a(249);"string"==typeof n&&(n=[[e.id,n,""]]);a(2)(n,{});n.locals&&(e.exports=n.locals)}});