mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-23 08:04:49 +00:00
1 line
No EOL
16 KiB
JavaScript
1 line
No EOL
16 KiB
JavaScript
webpackJsonp([10,32],{257:function(t,a,n){a=t.exports=n(1)(),a.push([t.id,"section[data-v-caa7bc1c]{max-width:960px}section+section[data-v-caa7bc1c]{margin-top:56px}.app-example .page-layout[data-v-caa7bc1c]{display:-ms-flexbox;display:flex}.app-example .column[data-v-caa7bc1c]{-ms-flex:1;flex:1;background-color:rgba(0,0,0,.06)}.app-example .column+.column[data-v-caa7bc1c]{margin-left:16px}.app-example .md-list[data-v-caa7bc1c]{background:none}.app-example .md-subheading[data-v-caa7bc1c]{padding:16px;display:block}.app-example .item-text[data-v-caa7bc1c]{-ms-flex:1;flex:1}.app-example .md-checkbox[data-v-caa7bc1c]{margin-right:16px}.app-example .md-button[data-v-caa7bc1c]{margin-left:16px}.card-layout[data-v-caa7bc1c]{margin:16px 15%;display:-ms-flexbox;display:flex}.card-layout .column[data-v-caa7bc1c]{-ms-flex:1;flex:1}.card-layout .column+.column[data-v-caa7bc1c]{margin-left:8px}.card-layout .md-card+.md-card[data-v-caa7bc1c]{margin-top:8px}",""])},370:function(t,a,n){var e,d;n(578);var m=n(530);d=e=e||{},"object"!=typeof e.default&&"function"!=typeof e.default||(d=e=e.default),"function"==typeof d&&(d=d.options),d.render=m.render,d.staticRenderFns=m.staticRenderFns,d._scopeId="data-v-caa7bc1c",t.exports=e},530:function(t,a){t.exports={render:function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("page-content",{attrs:{"page-title":"Themes - Dynamic Themes"}},[n("docs-component",[n("div",{slot:"description"},[n("p",[t._v("Vue Material have a complete theme suite. You can create several themes and apply them on-demand. Like on this documentation website you can set a different theme per-page using the API. But you can have a advanced way to change themes using dynamic themes.")]),t._v(" "),n("p",[t._v("You can apply a theme only in a single area of your application using the "),n("code",[t._v("<md-theme>")]),t._v(". If the theme component have only one child element then the theme definition will be attached to this particular element. In other case the component will wrap all of it's children in a "),n("code",[t._v("<div>")]),t._v(" tag (or you can customize the output tag).")]),t._v(" "),n("p",[t._v("Also every single component in Vue Material suite have a "),n("code",[t._v("md-theme")]),t._v(" attribute to set his theme.")]),t._v(" "),n("p",[t._v("All the components will inherit all theme properties from it's parents. If the direct parent doesn't have a theme definition the theme will be resolved by its closest parent or the current theme of the entire application.")])]),t._v(" "),n("div",{slot:"api"},[n("api-table",{attrs:{name:"md-theme"}},[n("md-table",{slot:"properties"},[n("md-table-header",[n("md-table-row",[n("md-table-head",[t._v("Name")]),t._v(" "),n("md-table-head",[t._v("Type")]),t._v(" "),n("md-table-head",[t._v("Description")])],1)],1),t._v(" "),n("md-table-body",[n("md-table-row",[n("md-table-cell",[t._v("md-name")]),t._v(" "),n("md-table-cell",[n("code",[t._v("String")])]),t._v(" "),n("md-table-cell",[t._v("The name of the theme to be applied.")])],1),t._v(" "),n("md-table-row",[n("md-table-cell",[t._v("md-tag")]),t._v(" "),n("md-table-cell",[n("code",[t._v("String")])]),t._v(" "),n("md-table-cell",[t._v("The tag to be applied to wrap all it's children elements.")])],1)],1)],1)],1)],1),t._v(" "),n("div",{slot:"example"},[n("example-box",{attrs:{"card-title":"Component"}},[n("div",{slot:"demo"},[n("div",{staticClass:"app-example"},[n("md-whiteframe",{attrs:{"md-tag":"md-toolbar","md-elevation":"1"}},[n("span",{staticClass:"md-title"},[t._v("Life Organizer 2.0")])]),t._v(" "),n("div",{staticClass:"page-layout"},[n("md-theme",{attrs:{"md-name":"indigo"}},[n("div",{staticClass:"column"},[n("strong",{staticClass:"md-subheading"},[t._v("Shopping list")]),t._v(" "),n("md-list",[n("md-list-item",[n("md-checkbox",{staticClass:"md-primary md-list-action"}),t._v(" "),n("span",{staticClass:"item-text"},[t._v("French bread")])],1),t._v(" "),n("md-list-item",[n("md-checkbox",{staticClass:"md-primary md-list-action",attrs:{value:!0}}),t._v(" "),n("span",{staticClass:"item-text"},[t._v("Brazilian Cheese Bread")])],1),t._v(" "),n("md-list-item",[n("md-checkbox",{staticClass:"md-primary md-list-action"}),t._v(" "),n("span",{staticClass:"item-text"},[t._v("Italian Bread")])],1)],1)],1)]),t._v(" "),n("md-theme",{attrs:{"md-name":"green"}},[n("div",{staticClass:"column"},[n("strong",{staticClass:"md-subheading"},[t._v("Todo List")]),t._v(" "),n("md-list",[n("md-list-item",[n("md-checkbox",{staticClass:"md-primary md-list-action"}),t._v(" "),n("span",{staticClass:"item-text"},[t._v("Create new components")])],1),t._v(" "),n("md-list-item",[n("md-checkbox",{staticClass:"md-primary md-list-action",attrs:{value:!0}}),t._v(" "),n("span",{staticClass:"item-text"},[t._v("Answer Github issues")])],1)],1)],1)]),t._v(" "),n("md-theme",{attrs:{"md-name":"orange"}},[n("div",{staticClass:"column"},[n("strong",{staticClass:"md-subheading"},[t._v("Notes")]),t._v(" "),n("md-list",[n("md-list-item",[n("span",{staticClass:"item-text"},[t._v("Wake up early")]),t._v(" "),n("md-button",{staticClass:"md-icon-button md-list-action"},[n("md-icon",[t._v("star")])],1)],1),t._v(" "),n("md-list-item",[n("span",{staticClass:"item-text"},[t._v("Have breakfast everyday")]),t._v(" "),n("md-button",{staticClass:"md-icon-button md-list-action"},[n("md-icon",{staticClass:"md-primary"},[t._v("star")])],1)],1),t._v(" "),n("md-list-item",[n("span",{staticClass:"item-text"},[t._v("Contribution")]),t._v(" "),n("md-button",{staticClass:"md-icon-button md-list-action"},[n("md-icon",{staticClass:"md-primary"},[t._v("star")])],1)],1),t._v(" "),n("md-list-item",[n("span",{staticClass:"item-text"},[t._v("Travels")]),t._v(" "),n("md-button",{staticClass:"md-icon-button md-list-action"},[n("md-icon",{staticClass:"md-primary"},[t._v("star")])],1)],1)],1)],1)])],1)],1)]),t._v(" "),n("div",{slot:"code"},[n("code-block",{attrs:{lang:"xml"}},[t._v('\n <div class="app-example">\n <md-theme md-name="blue">\n <md-whiteframe md-tag="md-toolbar" md-elevation="1">\n <span class="md-title">Life Organizer 2.0</span>\n </md-whiteframe>\n </md-theme>\n\n <div class="page-layout">\n <md-theme md-name="indigo">\n <div class="column">\n <strong class="md-subheading">Shopping list</strong>\n <md-list>\n <md-list-item>\n <md-checkbox class="md-primary md-list-action"></md-checkbox>\n <span class="item-text">French bread</span>\n </md-list-item>\n\n <md-list-item>\n <md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>\n <span class="item-text">Brazilian Cheese Bread</span>\n </md-list-item>\n\n <md-list-item>\n <md-checkbox class="md-primary md-list-action"></md-checkbox>\n <span class="item-text">Italian Bread</span>\n </md-list-item>\n </md-list>\n </div>\n </md-theme>\n\n <md-theme md-name="green">\n <div class="column">\n <strong class="md-subheading">Todo List</strong>\n <md-list>\n <md-list-item>\n <md-checkbox class="md-primary md-list-action"></md-checkbox>\n <span class="item-text">Create new components</span>\n </md-list-item>\n\n <md-list-item>\n <md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>\n <span class="item-text">Answer Github issues</span>\n </md-list-item>\n </md-list>\n </div>\n </md-theme>\n\n <md-theme md-name="orange">\n <div class="column">\n <strong class="md-subheading">Notes</strong>\n <md-list>\n <md-list-item>\n <span class="item-text">Wake up early</span>\n <md-button class="md-icon-button md-list-action">\n <md-icon>star</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <span class="item-text">Have breakfast everyday</span>\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">star</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <span class="item-text">Contribution</span>\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">star</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <span class="item-text">Travels</span>\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">star</md-icon>\n </md-button>\n </md-list-item>\n </md-list>\n </div>\n </md-theme>\n </div>\n </div>\n ')]),t._v(" "),n("code-block",{attrs:{lang:"sass"}},[t._v("\n .app-example {\n .page-layout {\n display: flex;\n }\n\n .column {\n flex: 1;\n background-color: rgba(#000, .06);\n\n + .column {\n margin-left: 16px;\n }\n }\n\n .md-list {\n background: none;\n }\n\n .md-subheading {\n padding: 16px;\n display: block;\n }\n\n .item-text {\n flex: 1;\n }\n\n .md-checkbox {\n margin-right: 16px;\n }\n\n .md-button {\n margin-left: 16px;\n }\n }\n ")])],1)]),t._v(" "),n("example-box",{attrs:{"card-title":"Attribute"}},[n("div",{slot:"demo"},[n("md-whiteframe",[n("md-toolbar",{attrs:{"md-theme":"blue"}},[n("span",{staticClass:"md-title"},[t._v("My app dashboard")])])],1),t._v(" "),n("div",{staticClass:"card-layout"},[n("div",{staticClass:"column"},[n("md-card",{staticClass:"md-primary",attrs:{"md-theme":"blue","md-with-hover":""}},[n("md-card-media",[n("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),n("md-ink-ripple"),t._v(" "),n("md-card-actions",[n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("favorite")])],1),t._v(" "),n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("bookmark")])],1),t._v(" "),n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("share")])],1)],1)],1),t._v(" "),n("md-card",{staticClass:"md-primary",attrs:{"md-theme":"green","md-with-hover":""}},[n("md-card-header",[n("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),n("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),n("md-card-content",[t._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit.")]),t._v(" "),n("md-ink-ripple"),t._v(" "),n("md-card-actions",[n("md-button",[t._v("Action")]),t._v(" "),n("md-button",[t._v("Action")])],1)],1)],1),t._v(" "),n("div",{staticClass:"column"},[n("md-card",{staticClass:"md-primary",attrs:{"md-theme":"orange","md-with-hover":""}},[n("md-card-header",[n("md-card-header-text",[n("div",{staticClass:"md-title"},[t._v("Title here")]),t._v(" "),n("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),n("md-card-media",[n("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})])],1),t._v(" "),n("md-card-actions",[n("md-button",[t._v("Action")]),t._v(" "),n("md-button",[t._v("Action")])],1)],1),t._v(" "),n("md-card",{staticClass:"md-primary",attrs:{"md-theme":"blue","md-with-hover":""}},[n("md-card-media",{attrs:{"md-ratio":"16:9"}},[n("img",{attrs:{src:"assets/card-sky.jpg",alt:"People"}})]),t._v(" "),n("md-ink-ripple"),t._v(" "),n("md-card-actions",[n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("favorite")])],1),t._v(" "),n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("bookmark")])],1),t._v(" "),n("md-button",{staticClass:"md-icon-button"},[n("md-icon",[t._v("share")])],1)],1)],1)],1)])],1),t._v(" "),n("div",{slot:"code"},[n("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-whiteframe>\n <md-toolbar md-theme="blue">\n <span class="md-title">My app dashboard</span>\n </md-toolbar>\n </md-whiteframe>\n\n <div class="card-layout">\n <div class="column">\n <md-card class="md-primary" md-theme="blue" md-with-hover>\n <md-card-media>\n <img src="assets/card-image-1.jpg" alt="People">\n </md-card-media>\n\n <md-ink-ripple></md-ink-ripple>\n\n <md-card-actions>\n <md-button class="md-icon-button">\n <md-icon>favorite</md-icon>\n </md-button>\n\n <md-button class="md-icon-button">\n <md-icon>bookmark</md-icon>\n </md-button>\n\n <md-button class="md-icon-button">\n <md-icon>share</md-icon>\n </md-button>\n </md-card-actions>\n </md-card>\n\n <md-card class="md-primary" md-theme="green" md-with-hover>\n <md-card-header>\n <div class="md-title">Title goes here</div>\n <div class="md-subhead">Subtitle here</div>\n </md-card-header>\n\n <md-card-content>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</md-card-content>\n\n <md-ink-ripple></md-ink-ripple>\n\n <md-card-actions>\n <md-button>Action</md-button>\n <md-button>Action</md-button>\n </md-card-actions>\n </md-card>\n </div>\n\n <div class="column">\n <md-card class="md-primary" md-theme="orange" md-with-hover>\n <md-card-header>\n <md-card-header-text>\n <div class="md-title">Title here</div>\n <div class="md-subhead">Subtitle here</div>\n </md-card-header-text>\n\n <md-card-media>\n <img src="assets/avatar-2.jpg" alt="People">\n </md-card-media>\n </md-card-header>\n\n <md-card-actions>\n <md-button>Action</md-button>\n <md-button>Action</md-button>\n </md-card-actions>\n </md-card>\n\n <md-card class="md-primary" md-theme="blue" md-with-hover>\n <md-card-media md-ratio="16:9">\n <img src="assets/card-sky.jpg" alt="People">\n </md-card-media>\n\n <md-ink-ripple></md-ink-ripple>\n\n <md-card-actions>\n <md-button class="md-icon-button">\n <md-icon>favorite</md-icon>\n </md-button>\n\n <md-button class="md-icon-button">\n <md-icon>bookmark</md-icon>\n </md-button>\n\n <md-button class="md-icon-button">\n <md-icon>share</md-icon>\n </md-button>\n </md-card-actions>\n </md-card>\n </div>\n </div>\n ')]),t._v(" "),n("code-block",{attrs:{lang:"sass"}},[t._v("\n .card-layout {\n margin: 16px 15%;\n display: flex;\n\n .column {\n flex: 1;\n\n + .column {\n margin-left: 8px;\n }\n }\n\n .md-card + .md-card {\n margin-top: 8px;\n }\n }\n ")])],1)])],1)])],1)},staticRenderFns:[]}},578:function(t,a,n){var e=n(257);"string"==typeof e&&(e=[[t.id,e,""]]);n(2)(e,{});e.locals&&(t.exports=e.locals)}}); |