mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-04 13:34:45 +00:00
Merge remote-tracking branch 'origin/develop' into components/mdLayout
* origin/develop: add dynamic theme docs and some examples validate theme name and apply default theme remove themes reference apply initial theme create initial theme remove old directive upgrade themes start reactive themes [release] 0.4.1 [build] 0.4.1
This commit is contained in:
Marcos Moura
commit
6f5589826d
70 changed files with 1190 additions and 701 deletions
31
README.md
31
README.md
|
|
@ -74,37 +74,6 @@ Vue.use(VueMaterial.mdSidenav)
|
|||
Vue.use(VueMaterial.mdToolbar)
|
||||
```
|
||||
|
||||
To get Vue Material working properly, you'll need to configure and apply a default theme.
|
||||
|
||||
``` javascript
|
||||
Vue.material.theme.register('default', {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
})
|
||||
```
|
||||
|
||||
Or you can register multiple themes at once.
|
||||
|
||||
``` javascript
|
||||
Vue.material.theme.registerAll({
|
||||
default: {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
},
|
||||
phone: {
|
||||
primary: 'indigo',
|
||||
accent: 'pink'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Apply your theme using <code>v-md-theme</code> directive:
|
||||
|
||||
``` html
|
||||
<div v-md-theme="'default'"></div>
|
||||
<div v-md-theme="'phone'"></div>
|
||||
```
|
||||
|
||||
## Browser Support
|
||||
Vue Material supports the latest version of all Browsers. This means:
|
||||
* Google Chrome 50+
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="container" v-md-theme="theme">
|
||||
<div class="container">
|
||||
<md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
|
||||
<md-toolbar class="vue-material-logo" v-md-theme="'white'">
|
||||
<md-toolbar class="vue-material-logo" md-theme="white">
|
||||
<router-link exact to="/">
|
||||
<img :src="logo" alt="Vue">
|
||||
<span>Vue Material</span>
|
||||
|
|
@ -19,9 +19,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/themes/configuration">Themes</router-link>
|
||||
|
||||
<!-- <span>Themes</span>
|
||||
<span>Themes</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
|
|
@ -33,7 +31,7 @@
|
|||
<router-link exact to="/themes/dynamic-themes">Dynamic Theme</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand> -->
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="example-box">
|
||||
<md-card class="example-box-card">
|
||||
<md-toolbar class="md-dense" v-md-theme="'white'">
|
||||
<md-toolbar md-theme="white" class="md-dense">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ var App = new Vue({
|
|||
</pre>
|
||||
|
||||
<pre ref="initialHtml">
|
||||
<div id="app" v-md-theme="'default'">
|
||||
<div id="app">
|
||||
### TEMPLATE ###
|
||||
</div>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import VueMaterial from '../../src';
|
|||
|
||||
Vue.use(VueMaterial);
|
||||
|
||||
Vue.material.theme.registerAll({
|
||||
Vue.material.registerTheme({
|
||||
default: {
|
||||
primary: 'blue',
|
||||
accent: 'pink'
|
||||
|
|
@ -25,7 +25,7 @@ Vue.material.theme.registerAll({
|
|||
accent: 'blue'
|
||||
},
|
||||
orange: {
|
||||
primary: 'deep-orange',
|
||||
primary: 'orange',
|
||||
accent: 'purple'
|
||||
},
|
||||
green: {
|
||||
|
|
|
|||
|
|
@ -27,21 +27,23 @@ let router = new VueRouter({
|
|||
|
||||
let Docs = Vue.component('app', App);
|
||||
let handleSectionTheme = (currentRoute) => {
|
||||
let theme = 'default';
|
||||
|
||||
if (currentRoute.name === 'getting-started') {
|
||||
Docs.theme = 'indigo';
|
||||
theme = 'indigo';
|
||||
} else if (currentRoute.name.indexOf('themes') >= 0) {
|
||||
Docs.theme = 'cyan';
|
||||
theme = 'cyan';
|
||||
} else if (currentRoute.name.indexOf('ui-elements') >= 0) {
|
||||
Docs.theme = 'blue-grey';
|
||||
theme = 'blue-grey';
|
||||
} else if (currentRoute.name === 'changelog') {
|
||||
Docs.theme = 'orange';
|
||||
theme = 'orange';
|
||||
} else if (currentRoute.name === 'about') {
|
||||
Docs.theme = 'green';
|
||||
theme = 'green';
|
||||
} else if (currentRoute.name === 'error') {
|
||||
Docs.theme = 'red';
|
||||
} else {
|
||||
Docs.theme = 'default';
|
||||
theme = 'red';
|
||||
}
|
||||
|
||||
Vue.material.setCurrentTheme(theme);
|
||||
};
|
||||
|
||||
Docs = new Docs({
|
||||
|
|
@ -51,7 +53,7 @@ Docs = new Docs({
|
|||
|
||||
handleSectionTheme(router.currentRoute);
|
||||
|
||||
router.afterEach((to) => {
|
||||
router.beforeEach((to, from, next) => {
|
||||
Vue.nextTick(() => {
|
||||
let mainContent = document.querySelector('.main-content');
|
||||
|
||||
|
|
@ -62,5 +64,7 @@ router.afterEach((to) => {
|
|||
Docs.closeSidenav();
|
||||
|
||||
handleSectionTheme(to);
|
||||
|
||||
next();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -88,60 +88,6 @@
|
|||
</section>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<section>
|
||||
<h2 class="md-headline">Themes</h2>
|
||||
|
||||
<p>To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once. Apply your theme on each code part that you want using <code>v-md-theme</code> directive:</p>
|
||||
|
||||
<md-tabs :md-dynamic-height="false" class="md-transparent">
|
||||
<md-tab md-label="Single Theme">
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.register('default', {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
})
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<div id="app" v-md-theme="'default'">
|
||||
<md-toolbar>
|
||||
<div class="md-title">My App</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button>My Button</md-button>
|
||||
</div>
|
||||
</code-block>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Multiple Themes">
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.registerAll({
|
||||
default: {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
},
|
||||
indigo: {
|
||||
primary: 'indigo',
|
||||
accent: 'pink'
|
||||
}
|
||||
})
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<div id="app" v-md-theme="'default'">
|
||||
<md-toolbar>
|
||||
<div class="md-title">My App</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button v-md-theme="'indigo'">My Button</md-button>
|
||||
</div>
|
||||
</code-block>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 class="md-headline">Codepen Examples</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -204,24 +204,24 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport" v-md-theme="'orange'">
|
||||
<md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-theme="orange">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'teal'">
|
||||
<md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-theme="teal">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'green'">
|
||||
<md-bottom-bar md-shift>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift md-theme="green">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
|
|
@ -229,8 +229,8 @@
|
|||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'indigo'">
|
||||
<md-bottom-bar md-shift>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift md-theme="indigo">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
|
|
@ -241,31 +241,39 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-theme="orange">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-theme="teal">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift md-theme="green">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift md-theme="indigo">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -273,7 +281,7 @@
|
|||
<example-box card-title="Dynamic Theme Example">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift v-md-theme="playground.theme">
|
||||
<md-bottom-bar md-shift :md-theme="playground.theme">
|
||||
<md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
|
|
@ -284,12 +292,14 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar md-shift v-md-theme="playground.theme">
|
||||
<md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<md-theme :md-name="playground.theme">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
|
|
|
|||
|
|
@ -406,30 +406,38 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
|
||||
<md-button class="md-icon-button md-primary" v-md-theme="'orange'">
|
||||
<md-button md-theme="indigo" class="md-primary">Indigo</md-button>
|
||||
|
||||
<md-button md-theme="teal" class="md-raised md-primary">Teal</md-button>
|
||||
|
||||
<md-button md-theme="orange" class="md-icon-button md-primary">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
|
||||
|
||||
<md-button md-theme="green" class="md-icon-button md-raised md-primary">
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-fab md-primary" v-md-theme="'brown'">
|
||||
|
||||
<md-button md-theme="brown" class="md-fab md-primary">
|
||||
<md-icon>dialpad</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
|
||||
<md-button class="md-icon-button md-primary" v-md-theme="'orange'">
|
||||
<md-button md-theme="indigo" class="md-primary">Indigo</md-button>
|
||||
|
||||
<md-button md-theme="teal" class="md-raised md-primary">Teal</md-button>
|
||||
|
||||
<md-button md-theme="orange" class="md-icon-button md-primary">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
|
||||
|
||||
<md-button md-theme="green" class="md-icon-button md-raised md-primary">
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-fab md-primary" v-md-theme="'brown'">
|
||||
|
||||
<md-button md-theme="brown" class="md-fab md-primary">
|
||||
<md-icon>dialpad</md-icon>
|
||||
</md-button>
|
||||
</code-block>
|
||||
|
|
|
|||
|
|
@ -823,7 +823,7 @@
|
|||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Themed Cards">
|
||||
<example-box card-title="Themes">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card class="md-primary">
|
||||
<md-card-media>
|
||||
|
|
@ -975,7 +975,7 @@
|
|||
|
||||
<example-box card-title="Complete Example">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card class="card-example" v-md-theme="'blue'">
|
||||
<md-card class="card-example">
|
||||
<md-card-area md-inset>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-example.jpg" alt="Coffee House">
|
||||
|
|
@ -1014,7 +1014,7 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-card class="card-example" v-md-theme="'blue'">
|
||||
<md-card class="card-example">
|
||||
<md-card-area md-inset>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-example.jpg" alt="Coffee House">
|
||||
|
|
|
|||
|
|
@ -89,48 +89,20 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<div class="themed" v-md-theme="'orange'">
|
||||
<md-checkbox id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'green'">
|
||||
<md-checkbox id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'light-blue'">
|
||||
<md-checkbox id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'indigo'">
|
||||
<md-checkbox id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'brown'">
|
||||
<md-checkbox id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
<md-checkbox md-name="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-name="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-name="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-name="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-checkbox id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-checkbox id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'light-blue'">
|
||||
<md-checkbox id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'indigo'">
|
||||
<md-checkbox id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-checkbox id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
<md-checkbox md-name="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-name="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-name="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-name="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -139,12 +111,6 @@
|
|||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.themed {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -40,18 +40,18 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="light-blue" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="green" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="brown" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="orange" class="md-primary">home</md-icon>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="light-blue" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="green" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="brown" class="md-primary">home</md-icon>
|
||||
<md-icon md-theme="orange" class="md-primary">home</md-icon>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -59,30 +59,3 @@
|
|||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<demo-page label="Components - Icon">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-primary">home</md-icon>
|
||||
<md-icon class="md-accent">home</md-icon>
|
||||
<md-icon class="md-warn">home</md-icon>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="2">
|
||||
<md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
|
||||
</demo-example>
|
||||
</div>
|
||||
</demo-page>
|
||||
</template> -->
|
||||
|
|
|
|||
|
|
@ -353,38 +353,30 @@
|
|||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<div v-md-theme="'green'">
|
||||
<md-input-container>
|
||||
<label>Green - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
</div>
|
||||
<md-input-container md-theme="green">
|
||||
<label>Green - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<div v-md-theme="'cyan'">
|
||||
<md-input-container>
|
||||
<label>Cyan - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</div>
|
||||
<md-input-container md-theme="red">
|
||||
<label>Red - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<div v-md-theme="'green'">
|
||||
<md-input-container>
|
||||
<label>Green - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
</div>
|
||||
<md-input-container md-theme="green">
|
||||
<label>Green - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<div v-md-theme="'cyan'">
|
||||
<md-input-container>
|
||||
<label>Cyan - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</div>
|
||||
<md-input-container md-theme="red">
|
||||
<label>Red - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -133,56 +133,56 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-theme md-name="orange">
|
||||
<md-radio v-model="radio5" id="my-test13" name="my-test-group4" md-value="1" class="md-primary">Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test14" name="my-test-group4" md-value="2" class="md-primary">Another Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test15" name="my-test-group4" md-value="3" class="md-primary">Another another Orange radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-theme md-name="brown">
|
||||
<md-radio v-model="radio6" id="my-test16" name="my-test-group4" md-value="1" class="md-primary">Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test17" name="my-test-group4" md-value="2" class="md-primary">Another Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test18" name="my-test-group4" md-value="3" class="md-primary">Another another Brown radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-theme md-name="green">
|
||||
<md-radio v-model="radio7" id="my-test19" name="my-test-group6" md-value="1" class="md-primary">Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test20" name="my-test-group6" md-value="2" class="md-primary">Another Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test21" name="my-test-group6" md-value="3" class="md-primary">Another another Green radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-theme md-name="teal">
|
||||
<md-radio v-model="radio8" id="my-test22" name="my-test-group3" md-value="1" class="md-primary">Teal radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test23" name="my-test-group3" md-value="2" class="md-primary" disabled>Teal disabled radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test24" name="my-test-group3" md-value="3" class="md-primary">Another another Teal radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-theme md-name="orange">
|
||||
<md-radio v-model="radio5" id="my-test13" name="my-test-group4" md-value="1" class="md-primary">Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test14" name="my-test-group4" md-value="2" class="md-primary">Another Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test15" name="my-test-group4" md-value="3" class="md-primary">Another another Orange radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-theme md-name="brown">
|
||||
<md-radio v-model="radio6" id="my-test16" name="my-test-group4" md-value="1" class="md-primary">Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test17" name="my-test-group4" md-value="2" class="md-primary">Another Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test18" name="my-test-group4" md-value="3" class="md-primary">Another another Brown radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-theme md-name="green">
|
||||
<md-radio v-model="radio7" id="my-test19" name="my-test-group6" md-value="1" class="md-primary">Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test20" name="my-test-group6" md-value="2" class="md-primary">Another Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test21" name="my-test-group6" md-value="3" class="md-primary">Another another Green radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-theme md-name="teal">
|
||||
<md-radio v-model="radio8" id="my-test22" name="my-test-group3" md-value="1" class="md-primary">Teal radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test23" name="my-test-group3" md-value="2" class="md-primary" disabled>Teal disabled radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test24" name="my-test-group3" md-value="3" class="md-primary">Another another Teal radio</md-radio>
|
||||
</div>
|
||||
</md-theme>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,25 @@
|
|||
<md-option value="verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
|
|
@ -227,6 +246,25 @@
|
|||
<md-option value="verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
|
|
@ -252,25 +290,6 @@
|
|||
<example-box card-title="Multiple">
|
||||
<div class="multiple" slot="demo">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
@ -300,25 +319,6 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
|
|||
|
|
@ -96,26 +96,45 @@
|
|||
|
||||
<example-box card-title="Complete Example">
|
||||
<div slot="demo">
|
||||
<div class="complete-example" v-md-theme="'orange'">
|
||||
<md-theme class="complete-example" md-name="orange">
|
||||
<md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
|
||||
<md-icon v-show="!done">cloud_upload</md-icon>
|
||||
<md-icon v-show="done">done</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-spinner :md-size="75" :md-progress="progress" v-show="transition && progress < 115"></md-spinner>
|
||||
</div>
|
||||
</md-theme>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="complete-example" v-md-theme="'orange'">
|
||||
<md-theme class="complete-example" md-name="orange">
|
||||
<md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
|
||||
<md-icon v-show="!done">cloud_upload</md-icon>
|
||||
<md-icon v-show="done">done</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-spinner :md-size="75" :md-progress="progress" v-show="transition && progress < 115"></md-spinner>
|
||||
</div>
|
||||
</md-theme>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.complete-example {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
|
||||
.md-fab {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.md-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@
|
|||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.</p>
|
||||
<p>The following classes can be applied to change the color palette:</p>
|
||||
<ul class="md-body-2">
|
||||
<li><code>md-primary</code></li>
|
||||
<li><code>md-accent</code></li>
|
||||
<li><code>md-warn</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
|
|||
|
|
@ -96,21 +96,10 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div>
|
||||
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
|
||||
</div>
|
||||
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
|
||||
<md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
|
||||
<md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
|
||||
<md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -137,41 +126,29 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
<div>
|
||||
<md-switch md-theme="orange" v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
<div>
|
||||
<md-switch md-theme="green" v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
<div>
|
||||
<md-switch md-theme="brown" v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'light-blue'">
|
||||
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
<div>
|
||||
<md-switch md-theme="light-blue" v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'light-blue'">
|
||||
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
</div>
|
||||
</div>
|
||||
<md-switch md-theme="orange" v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
<md-switch md-theme="green" v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
<md-switch md-theme="brown" v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
<md-switch md-theme="light-blue" v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@
|
|||
|
||||
<example-box card-title="Fixed">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-fixed>
|
||||
<md-tabs :md-dynamic-height="false" md-fixed class="md-accent">
|
||||
<md-tab id="movies" md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
|
||||
<example-box card-title="Centered with Text and Icon">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-centered>
|
||||
<md-tabs :md-dynamic-height="false" md-centered class="md-warn">
|
||||
<md-tab md-label="Movies" md-icon="ondemand_video">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
|
||||
<example-box card-title="Aligned to the right with only icons">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-right>
|
||||
<md-tabs :md-dynamic-height="false" md-right class="md-transparent">
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<md-toolbar v-md-theme="'green'">
|
||||
<md-toolbar md-theme="green">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar class="md-large" v-md-theme="'brown'">
|
||||
<md-toolbar class="md-large" md-theme="brown">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'orange'">
|
||||
<md-toolbar md-theme="orange">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'blue'">
|
||||
<md-toolbar md-theme="blue">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar v-md-theme="'green'">
|
||||
<md-toolbar md-theme="green">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar class="md-large" v-md-theme="'brown'">
|
||||
<md-toolbar class="md-large" md-theme="brown">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
|
|
@ -390,7 +390,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'orange'">
|
||||
<md-toolbar md-theme="orange">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -401,7 +401,7 @@
|
|||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'blue'">
|
||||
<md-toolbar md-theme="blue">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
|
@ -418,32 +418,30 @@
|
|||
<example-box card-title="Complete example">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
|
|
@ -499,7 +497,7 @@
|
|||
<md-subheader class="md-inset">Files</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="blue" class="md-avatar-icon md-primary">
|
||||
<md-icon>insert_drive_file</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -514,7 +512,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="orange" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -529,7 +527,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="green" class="md-avatar-icon md-primary">
|
||||
<md-icon>view_list</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -544,7 +542,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="orange" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -559,8 +557,8 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-sidenav class="md-left" ref="sidenav">
|
||||
<md-toolbar class="md-account-header" v-md-theme="'blue'">
|
||||
<md-sidenav md-theme="blue" class="md-left" ref="sidenav">
|
||||
<md-toolbar class="md-account-header">
|
||||
<md-list class="md-transparent">
|
||||
<md-list-item class="md-avatar-list">
|
||||
<md-avatar class="md-large">
|
||||
|
|
@ -591,7 +589,7 @@
|
|||
</md-list>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list v-md-theme="'blue'">
|
||||
<md-list>
|
||||
<md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
|
||||
<md-icon>insert_drive_file</md-icon> <span>My files</span>
|
||||
</md-list-item>
|
||||
|
|
@ -619,32 +617,30 @@
|
|||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
|
|
@ -700,7 +696,7 @@
|
|||
<md-subheader class="md-inset">Files</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="blue" class="md-avatar-icon md-primary">
|
||||
<md-icon>insert_drive_file</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -715,7 +711,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="orange" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -730,7 +726,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="green" class="md-avatar-icon md-primary">
|
||||
<md-icon>view_list</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -745,7 +741,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-avatar md-theme="orange" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
|
|
@ -760,8 +756,8 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-sidenav class="md-left" ref="sidenav">
|
||||
<md-toolbar class="md-account-header" v-md-theme="'blue'">
|
||||
<md-sidenav md-theme="blue" class="md-left" ref="sidenav">
|
||||
<md-toolbar class="md-account-header">
|
||||
<md-list class="md-transparent">
|
||||
<md-list-item class="md-avatar-list">
|
||||
<md-avatar class="md-large">
|
||||
|
|
@ -792,7 +788,7 @@
|
|||
</md-list>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list v-md-theme="'blue'">
|
||||
<md-list>
|
||||
<md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
|
||||
<md-icon>insert_drive_file</md-icon> <span>My files</span>
|
||||
</md-list-item>
|
||||
|
|
@ -833,12 +829,6 @@
|
|||
left: 16px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
.md-icon {
|
||||
color: #014e70;
|
||||
}
|
||||
}
|
||||
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -897,12 +887,6 @@
|
|||
left: 16px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
.md-icon {
|
||||
color: #014e70;
|
||||
}
|
||||
}
|
||||
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<page-content page-title="Themes">
|
||||
<page-content page-title="Themes - Configuration">
|
||||
<article class="main-content">
|
||||
<section>
|
||||
<h2 class="md-headline">Theme Engine</h2>
|
||||
|
|
@ -47,20 +47,24 @@
|
|||
|
||||
<section>
|
||||
<h3 class="md-headline">Registering themes</h3>
|
||||
<p>To configure the colors of your application you can use the API.</p>
|
||||
<p>The default colors will be applied without any change in your code base. But you can change the colors of the <code>default</code> theme calling the Vue Material API.</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.register('default', {
|
||||
primary: 'cyan',
|
||||
accent: 'pink',
|
||||
Vue.material.registerTheme('default', {
|
||||
primary: 'blue',
|
||||
accent: 'red',
|
||||
warn: 'red',
|
||||
background: 'grey'
|
||||
})
|
||||
</code-block>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="md-headline">Multiple themes</h3>
|
||||
<p>
|
||||
You can call the <code>register</code> function how many times you want. However Vue Material have a <code>registerAll</code> function to create multiple themes:
|
||||
You can call the <code>registerTheme</code> function how many times you want. However you can pass an object containing all the themes that you need to create:
|
||||
</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.registerAll({
|
||||
Vue.material.registerTheme({
|
||||
app: {
|
||||
primary: 'cyan'
|
||||
},
|
||||
|
|
@ -79,7 +83,7 @@
|
|||
<h3 class="md-headline">Custom Shades</h3>
|
||||
<p>To have a full use of the Material Design palette you can specify different shades for each color:</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.register('app', {
|
||||
Vue.material.registerTheme('about', {
|
||||
primary: {
|
||||
color: 'indigo',
|
||||
hue: 'A200'
|
||||
|
|
@ -94,22 +98,15 @@
|
|||
|
||||
<section>
|
||||
<h3 class="md-headline">Applying a theme</h3>
|
||||
<p>You can apply a single theme for your entire application and another for a single piece of your code. This makes easy to theme single components or to change colors between pages.</p>
|
||||
<p>Vue Material exposes an directive called <code>v-md-theme</code> which will set the theme on an element:</p>
|
||||
<code-block lang="html">
|
||||
<div id="app" v-md-theme="'default'"> <!-- Closest element in a Vue Instance -->
|
||||
<md-toolbar>
|
||||
<div class="md-title">My App</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button v-md-theme="'indigo'">My Button</md-button>
|
||||
</div>
|
||||
<p>To change the current theme in your application just call the <code>setCurrentTheme</code> method from anywhere in your application:</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.material.setCurrentTheme('about')
|
||||
</code-block>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="md-headline">Codepen example</h3>
|
||||
<iframe 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" style="width: 100%;">See the Pen <a href="http://codepen.io/vue-material/pen/WGavBE/">Theme Example</a> by Vue Material (<a href="http://codepen.io/vue-material">@vue-material</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>
|
||||
<iframe 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" style="width: 100%;">See the Pen <a href="http://codepen.io/vue-material/pen/WGavBE/">Theme Example</a> by Vue Material (<a href="http://codepen.io/vue-material">@vue-material</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>
|
||||
</section>
|
||||
</article>
|
||||
</page-content>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,524 @@
|
|||
<template>
|
||||
<page-content page-title="Themes - Dynamic Themes">
|
||||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>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.</p>
|
||||
<p>You can apply a theme only in a single area of your application using the <code><md-theme></code>. 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 <code><div></code> tag (or you can customize the output tag).</p>
|
||||
<p>Also every single component in Vue Material suite have a <code>md-theme</code> attribute to set his theme.</p>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<api-table name="md-theme">
|
||||
<md-table slot="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Type</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-name</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The name of the theme to be applied.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-tag</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The tag to be applied to wrap all it's children elements.</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="Component">
|
||||
<div slot="demo">
|
||||
<div class="app-example">
|
||||
<md-whiteframe md-tag="md-toolbar" md-elevation="1">
|
||||
<span class="md-title">Life Organizer 2.0</span>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="page-layout">
|
||||
<md-theme md-name="indigo">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Shopping list</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">French bread</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Brazilian Cheese Bread</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Italian Bread</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<md-theme md-name="green">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Todo List</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Create new components</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Answer Github issues</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<md-theme md-name="orange">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Notes</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<span class="item-text">Wake up early</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Have breakfast everyday</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Contribution</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Travels</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="app-example">
|
||||
<md-theme md-name="blue">
|
||||
<md-whiteframe md-tag="md-toolbar" md-elevation="1">
|
||||
<span class="md-title">Life Organizer 2.0</span>
|
||||
</md-whiteframe>
|
||||
</md-theme>
|
||||
|
||||
<div class="page-layout">
|
||||
<md-theme md-name="indigo">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Shopping list</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">French bread</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Brazilian Cheese Bread</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Italian Bread</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<md-theme md-name="green">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Todo List</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-checkbox class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Create new components</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
|
||||
<span class="item-text">Answer Github issues</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<md-theme md-name="orange">
|
||||
<div class="column">
|
||||
<strong class="md-subheading">Notes</strong>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<span class="item-text">Wake up early</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Have breakfast everyday</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Contribution</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="item-text">Travels</span>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-theme>
|
||||
</div>
|
||||
</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.app-example {
|
||||
.page-layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
background-color: rgba(#000, .06);
|
||||
|
||||
+ .column {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.md-subheading {
|
||||
padding: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.md-checkbox {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Attribute">
|
||||
<div slot="demo">
|
||||
<md-whiteframe>
|
||||
<md-toolbar md-theme="blue">
|
||||
<span class="md-title">My app dashboard</span>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="card-layout">
|
||||
<div class="column">
|
||||
<md-card class="md-primary" md-theme="blue" md-with-hover>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card class="md-primary" md-theme="green" md-with-hover>
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</md-card-content>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<md-card class="md-primary" md-theme="orange" md-with-hover>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/avatar-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card class="md-primary" md-theme="blue" md-with-hover>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-sky.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-whiteframe>
|
||||
<md-toolbar md-theme="blue">
|
||||
<span class="md-title">My app dashboard</span>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="card-layout">
|
||||
<div class="column">
|
||||
<md-card class="md-primary" md-theme="blue" md-with-hover>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card class="md-primary" md-theme="green" md-with-hover>
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</md-card-content>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<md-card class="md-primary" md-theme="orange" md-with-hover>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/avatar-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card class="md-primary" md-theme="blue" md-with-hover>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-sky.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.card-layout {
|
||||
margin: 16px 15%;
|
||||
display: flex;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
|
||||
+ .column {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card + .md-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
</div>
|
||||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
max-width: 960px;
|
||||
|
||||
+ section {
|
||||
margin-top: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-example {
|
||||
.page-layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
background-color: rgba(#000, .06);
|
||||
|
||||
+ .column {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.md-subheading {
|
||||
padding: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.md-checkbox {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-layout {
|
||||
margin: 16px 15%;
|
||||
display: flex;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
|
||||
+ .column {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card + .md-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-avatar,
|
||||
&.md-avatar {
|
||||
&.md-primary {
|
||||
&.md-avatar-icon {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<div class="md-avatar">
|
||||
<div class="md-avatar" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdAvatar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-bottom-bar,
|
||||
&.md-bottom-bar {
|
||||
&.md-fixed {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-bottom-bar" :class="classes">
|
||||
<div class="md-bottom-bar" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,10 +7,13 @@
|
|||
<style lang="scss" src="./mdBottomBar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdShift: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdShift ? 'md-shift' : 'md-fixed';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-button:not([disabled]),
|
||||
&.md-button:not([disabled]) {
|
||||
&.md-raised {
|
||||
&:not(.md-icon-button) {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
<template>
|
||||
<button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-if="!href">
|
||||
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
<a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-else>
|
||||
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
|
||||
<slot></slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdButton.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
href: String,
|
||||
type: String,
|
||||
target: String,
|
||||
rel: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
disabled: Boolean
|
||||
},
|
||||
render(createElement) {
|
||||
let isDisabled = Boolean(this.disabled);
|
||||
let hasLink = Boolean(this.href);
|
||||
let tag = 'button';
|
||||
let options = {
|
||||
staticClass: 'md-button',
|
||||
attrs: {
|
||||
type: this.type || 'button',
|
||||
disabled: isDisabled
|
||||
},
|
||||
on: {
|
||||
click: ($event) => {
|
||||
this.$emit('click', $event);
|
||||
}
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
newRel() {
|
||||
if (this.target === '_blank') {
|
||||
return this.rel || 'noopener';
|
||||
}
|
||||
};
|
||||
let ripple = createElement('md-ink-ripple', {
|
||||
attrs: {
|
||||
mdDisabled: isDisabled
|
||||
}
|
||||
});
|
||||
|
||||
if (hasLink) {
|
||||
tag = 'a';
|
||||
options.attrs.href = this.href;
|
||||
delete options.attrs.type;
|
||||
return this.rel;
|
||||
}
|
||||
|
||||
return createElement(tag, options, [...this.$slots.default, ripple]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-button-toggle,
|
||||
&.md-button-toggle {
|
||||
.md-button {
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-button-group md-button-toggle">
|
||||
<div class="md-button-toggle" :class="[themeClass]" >
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,12 +7,15 @@
|
|||
<style lang="scss" src="./mdButtonToggle.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
let onClickButton;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdSingle: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
mounted() {
|
||||
this.$children.forEach((child) => {
|
||||
let element = child.$el;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,49 @@
|
|||
.THEME_NAME {
|
||||
.md-card,
|
||||
&.md-card {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
&.md-primary {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
||||
.md-card-header,
|
||||
.md-card-actions {
|
||||
.md-icon-button {
|
||||
.md-icon {
|
||||
color: #{'PRIMARY-CONTRAST-0.87'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
|
||||
.md-card-header,
|
||||
.md-card-actions {
|
||||
.md-icon-button {
|
||||
.md-icon {
|
||||
color: #{'ACCENT-CONTRAST-0.87'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
|
||||
.md-card-header,
|
||||
.md-card-actions {
|
||||
.md-icon-button {
|
||||
.md-icon {
|
||||
color: #{'WARN-CONTRAST-0.87'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-header,
|
||||
.md-card-actions {
|
||||
.md-icon-button {
|
||||
|
|
@ -37,20 +78,5 @@
|
|||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card" :class="classes">
|
||||
<div class="md-card" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,10 +7,13 @@
|
|||
<style lang="scss" src="./mdCard.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdWithHover: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-checkbox,
|
||||
&.md-checkbox {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-checkbox" :class="classes">
|
||||
<div class="md-checkbox" :class="[themeClass, classes]">
|
||||
<div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
|
||||
</div>
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<style lang="scss" src="./mdCheckbox.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -20,6 +22,7 @@
|
|||
id: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
checked: this.value
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.THEME_NAME {
|
||||
.md-dialog,
|
||||
&.md-dialog {
|
||||
&.md-dialog-container .md-dialog {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-dialog-container" :class="classes" @keyup.esc="mdEscToClose && close()" tabindex="0">
|
||||
<div class="md-dialog-container" :class="[themeClass, classes]" @keyup.esc="mdEscToClose && close()" tabindex="0">
|
||||
<div class="md-dialog" ref="dialog" :style="styles" :class="dialogClasses">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
<style lang="scss" src="./mdDialog.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import transitionEndEventName from '../../core/utils/transitionEndEventName';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
default: false
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data: () => ({
|
||||
active: false,
|
||||
transitionOff: false,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-icon,
|
||||
&.md-icon {
|
||||
&.md-primary {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<i class="md-icon material-icons">
|
||||
<i class="md-icon material-icons" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdIcon.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-input-container,
|
||||
&.md-input-container {
|
||||
&.md-input-invalid {
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-input-container" :class="classes">
|
||||
<div class="md-input-container" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
|
||||
<span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
<style lang="scss" src="./mdInputContainer.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import isArray from '../../core/utils/isArray';
|
||||
|
||||
export default {
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
mdInline: Boolean,
|
||||
mdHasPassword: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-list,
|
||||
&.md-list {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<ul class="md-list">
|
||||
<ul class="md-list" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdList.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ $menu-base-width: 56px;
|
|||
position: absolute;
|
||||
z-index: 120;
|
||||
transform: scale(.9, .85) translateZ(0);
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
opacity: 0;
|
||||
|
|
@ -26,7 +25,6 @@ $menu-base-width: 56px;
|
|||
margin .2s $swift-ease-in-timing-function,
|
||||
transform 0s .25s $swift-ease-in-timing-function;
|
||||
will-change: transform, opacity, width;
|
||||
color: rgba(#212121, .87);
|
||||
|
||||
&.md-direction-bottom-right {
|
||||
margin-top: -20px;
|
||||
|
|
@ -107,17 +105,8 @@ $menu-base-width: 56px;
|
|||
font-size: 16px;
|
||||
line-height: 1.2em;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.md-highlighted {
|
||||
.md-button:not([disabled]) {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
|
||||
.md-list-item-holder {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
.THEME_NAME {
|
||||
.md-menu,
|
||||
&.md-menu {
|
||||
&.md-menu-content {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
|
||||
.md-menu-item {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.md-highlighted {
|
||||
.md-button:not([disabled]) {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #{'BACKGROUND-CONTRAST-0.38'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-menu-content"
|
||||
:class="[themeClass]"
|
||||
@keydown.esc.prevent="close"
|
||||
@keydown.tab.prevent="close"
|
||||
@keydown.up.prevent="highlightItem('up')"
|
||||
|
|
@ -15,6 +16,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -23,6 +26,7 @@
|
|||
itemsAmount: 0
|
||||
};
|
||||
},
|
||||
mixins: [theme],
|
||||
methods: {
|
||||
close() {
|
||||
this.highlighted = false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-radio,
|
||||
&.md-radio {
|
||||
.md-radio-container:after {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-radio" :class="classes">
|
||||
<div class="md-radio" :class="[themeClass, classes]">
|
||||
<div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
|
||||
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
</div>
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<style lang="scss" src="./mdRadio.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
},
|
||||
disabled: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ $select-height: 32px;
|
|||
right: 0;
|
||||
transform: translateY(-50%) scaleY(0.45) scaleX(0.85);
|
||||
transition: $swift-linear;
|
||||
color: rgba(#000, .54);
|
||||
content: "\25BC";
|
||||
}
|
||||
|
||||
|
|
@ -47,10 +46,6 @@ $select-height: 32px;
|
|||
pointer-events: none;
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
|
||||
&:after {
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -80,47 +75,6 @@ $select-height: 32px;
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.md-select-menu {
|
||||
min-width: 156px;
|
||||
max-width: 100%;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: stretch;
|
||||
align-content: stretch;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
z-index: 7;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
opacity: 0;
|
||||
transform: scale3D(.85, .7, 1);
|
||||
transition: opacity .25s $swift-ease-in-timing-function,
|
||||
top .25s $swift-ease-in-timing-function,
|
||||
transform 0s .25s $swift-ease-in-timing-function;
|
||||
color: rgba(#212121, .87);
|
||||
|
||||
> * {
|
||||
opacity: 0;
|
||||
transition: $swift-ease-out;
|
||||
transition-duration: .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.md-select-menu-container {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: stretch;
|
||||
align-content: stretch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.md-subheader {
|
||||
color: rgba(#757575, .87);
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
.THEME_NAME {
|
||||
.md-select-content,
|
||||
&.md-select {
|
||||
&:after {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: #{'BACKGROUND-CONTRAST-0.38'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-select-content {
|
||||
.md-menu-item {
|
||||
&.md-selected,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="md-select" :class="classes">
|
||||
<div class="md-select" :class="[themeClass, classes]">
|
||||
<md-menu :md-close-on-select="!multiple">
|
||||
<span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || multipleText || placeholder }}</span>
|
||||
|
||||
<md-menu-content class="md-select-content" :class="contentClasses">
|
||||
<md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
|
||||
<slot></slot>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
<style lang="scss" src="./mdSelect.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
import isArray from '../../core/utils/isArray';
|
||||
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
placeholder: String,
|
||||
mdMenuClass: String
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
selectedValue: null,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-sidenav,
|
||||
&.md-sidenav {
|
||||
.md-sidenav-content {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-sidenav" :class="classes" @keyup.esc="close" tabindex="0">
|
||||
<div class="md-sidenav" :class="[themeClass, classes]" @keyup.esc="close" tabindex="0">
|
||||
<div class="md-sidenav-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -11,12 +11,15 @@
|
|||
<style lang="scss" src="./mdSidenav.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mdVisible: false
|
||||
};
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdVisible && 'md-active';
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
transition-duration: 1.8s;
|
||||
|
||||
.md-spinner-draw {
|
||||
animation: spinner-initial-rotate 1.79s $swift-ease-out-timing-function infinite;
|
||||
animation: spinner-initial-rotate 1.75s $swift-ease-out-timing-function infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-spinner,
|
||||
&.md-spinner {
|
||||
.md-spinner-path {
|
||||
stroke: #{'PRIMARY-COLOR'}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="md-spinner" appear>
|
||||
<div class="md-spinner" :class="classes" :style="styles">
|
||||
<div class="md-spinner" :class="[themeClass, classes]":style="styles">
|
||||
<svg class="md-spinner-draw" viewBox="25 25 50 50">
|
||||
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-dasharray="dashProgress">
|
||||
</svg>
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
<style lang="scss" src="./mdSpinner.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdSize: {
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
default: 0
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.THEME_NAME {
|
||||
.md-subheader,
|
||||
&.md-subheader {
|
||||
|
||||
&.md-primary {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
<template>
|
||||
<li class="md-subheader" :class="[themeClass]" v-if="$parent.$options._componentTag === 'md-list'">
|
||||
<slot></slot>
|
||||
</li>
|
||||
|
||||
<div class="md-subheader" :class="[themeClass]" v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdSubheader.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
render(createElement) {
|
||||
let tag = 'div';
|
||||
let options = {
|
||||
staticClass: 'md-subheader'
|
||||
};
|
||||
|
||||
if (this.$parent.$options._componentTag === 'md-list') {
|
||||
tag = 'li';
|
||||
}
|
||||
|
||||
return createElement(tag, options, this.$slots.default);
|
||||
}
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-switch,
|
||||
&.md-switch {
|
||||
&.md-checked {
|
||||
.md-switch-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-switch" :class="classes">
|
||||
<div class="md-switch" :class="[themeClass, classes]">
|
||||
<div class="md-switch-container" @click="toggleSwitch">
|
||||
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
<style lang="scss" src="./mdSwitch.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
let fullThreshold = 75;
|
||||
let initialThreshold = '-1px';
|
||||
|
||||
|
|
@ -30,6 +32,7 @@
|
|||
default: 'button'
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
leftPos: initialThreshold,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
.THEME_NAME {
|
||||
.md-table,
|
||||
&.md-table {
|
||||
|
||||
}
|
||||
|
||||
.md-table-card,
|
||||
&.md-table-card {
|
||||
.md-toolbar {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
|
@ -12,7 +10,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.md-table-alternate-header,
|
||||
&.md-table-alternate-header {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-table">
|
||||
<div class="md-table" :class="[themeClass]">
|
||||
<table>
|
||||
<slot></slot>
|
||||
</table>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
<style lang="scss" src="./mdTable.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
mdSortType: String,
|
||||
mdSort: String
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
sortType: this.mdSortType,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-table-alternate-header" :class="classes">
|
||||
<div class="md-table-alternate-header" :class="[themeClass, classes]">
|
||||
<md-toolbar>
|
||||
<div class="md-counter">
|
||||
<span ref="counter">{{ tableInstance.numberOfSelected }}</span>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
default: 'selected'
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
classes: {},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<md-card class="md-table-card">
|
||||
<md-card class="md-table-card" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,94 @@
|
|||
.THEME_NAME {
|
||||
.md-tabs,
|
||||
&.md-tabs {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'PRIMARY-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
.md-tabs-navigation {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'BACKGROUND-CONTRAST-0.26'}
|
||||
color: #{'PRIMARY-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
> .md-tabs-navigation {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'BACKGROUND-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
.md-tab-header {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'ACCENT-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'ACCENT-CONTRAST-0.26'}
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
.md-tab-header {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'WARN-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'WARN-CONTRAST-0.26'}
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-tabs" :class="tabClasses">
|
||||
<div class="md-tabs" :class="[themeClass, tabClasses]">
|
||||
<md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
<style lang="scss" src="./mdTabs.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdFixed: Boolean,
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
default: 0
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data: () => ({
|
||||
tabList: {},
|
||||
activeTab: null,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-toolbar,
|
||||
&.md-toolbar {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<div class="md-toolbar">
|
||||
<div class="md-toolbar" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdToolbar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import palette from './palette';
|
||||
import rgba from './rgba';
|
||||
import MdTheme from './MdTheme';
|
||||
|
||||
const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3'];
|
||||
const DEFAULT_THEME_COLORS = {
|
||||
|
|
@ -24,8 +25,9 @@ const DEFAULT_THEME_COLORS = {
|
|||
const createNewStyleElement = (style, name) => {
|
||||
let head = document.head;
|
||||
let styleId = 'md-theme-' + name;
|
||||
let styleElement = head.querySelector('#' + styleId);
|
||||
|
||||
if (!head.querySelector('#' + styleId)) {
|
||||
if (!styleElement) {
|
||||
let newTag = document.createElement('style');
|
||||
|
||||
style = style.replace(/THEME_NAME/g, styleId);
|
||||
|
|
@ -35,6 +37,8 @@ const createNewStyleElement = (style, name) => {
|
|||
newTag.textContent = style;
|
||||
|
||||
head.appendChild(newTag);
|
||||
} else {
|
||||
styleElement.textContent = style;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -107,47 +111,50 @@ const registerTheme = (theme, name, themeStyles) => {
|
|||
const registerAllThemes = (themes, themeStyles) => {
|
||||
let themeNames = themes ? Object.keys(themes) : [];
|
||||
|
||||
if (themeNames.indexOf('default') === -1) {
|
||||
registerTheme(DEFAULT_THEME_COLORS, 'default', themeStyles);
|
||||
registeredThemes.push('default');
|
||||
}
|
||||
|
||||
themeNames.forEach((name) => {
|
||||
registerTheme(themes[name], name, themeStyles);
|
||||
registeredThemes.push(name);
|
||||
});
|
||||
};
|
||||
|
||||
const registerDirective = (element, { value, oldValue }) => {
|
||||
let theme = value;
|
||||
let newClass = 'md-theme-' + theme;
|
||||
let oldClass = 'md-theme-' + oldValue;
|
||||
|
||||
if (!element.classList.contains(newClass)) {
|
||||
element.classList.remove(oldClass);
|
||||
|
||||
if (theme && registeredThemes.indexOf(theme) >= 0) {
|
||||
element.classList.add(newClass);
|
||||
} else {
|
||||
element.classList.add(oldClass);
|
||||
console.warn('Attempted to use unregistered theme "' + theme + '\".');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.directive('mdTheme', registerDirective);
|
||||
Vue.material = new Vue({
|
||||
data: () => ({
|
||||
styles: [],
|
||||
currentTheme: null
|
||||
}),
|
||||
methods: {
|
||||
registerTheme(name, spec) {
|
||||
let theme = {};
|
||||
|
||||
Vue.material.theme = {
|
||||
register(name, spec) {
|
||||
let theme = {};
|
||||
if (typeof name === 'string') {
|
||||
theme[name] = spec;
|
||||
} else {
|
||||
theme = name;
|
||||
}
|
||||
|
||||
theme[name] = spec;
|
||||
registerAllThemes(theme, this.styles);
|
||||
},
|
||||
applyCurrentTheme(themeName) {
|
||||
document.body.classList.remove('md-theme-' + this.currentTheme);
|
||||
document.body.classList.add('md-theme-' + themeName);
|
||||
this.currentTheme = themeName;
|
||||
},
|
||||
setCurrentTheme(themeName) {
|
||||
if (registeredThemes.indexOf(themeName) >= 0) {
|
||||
this.applyCurrentTheme(themeName);
|
||||
} else {
|
||||
if (registeredThemes.indexOf('default') === -1) {
|
||||
this.registerTheme('default', DEFAULT_THEME_COLORS);
|
||||
} else {
|
||||
console.warn(`The theme '${themeName}' doesn't exists. You need to register it first in order to use.`);
|
||||
}
|
||||
|
||||
registerAllThemes(theme, Vue.material.styles);
|
||||
},
|
||||
registerAll(themes) {
|
||||
registerAllThemes(themes, Vue.material.styles);
|
||||
this.applyCurrentTheme('default');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
Vue.component('md-theme', MdTheme);
|
||||
}
|
||||
|
|
|
|||
23
src/core/components/mdTheme/mdTheme.vue
Normal file
23
src/core/components/mdTheme/mdTheme.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdTag: String,
|
||||
mdName: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
name: 'md-theme'
|
||||
}),
|
||||
render(render) {
|
||||
if (this.mdTag || this.$slots.default.length > 1) {
|
||||
return render(this.mdTag || 'div', {
|
||||
staticClass: 'md-theme'
|
||||
}, this.$slots.default);
|
||||
}
|
||||
|
||||
return this.$slots.default[0];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
45
src/core/components/mdTheme/mixin.js
Normal file
45
src/core/components/mdTheme/mixin.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdTheme: String
|
||||
},
|
||||
data: () => ({
|
||||
closestThemedParent: false
|
||||
}),
|
||||
methods: {
|
||||
getClosestThemedParent($parent) {
|
||||
if (!$parent || !$parent.$el || $parent._uid === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent.mdTheme || $parent.mdName) {
|
||||
return $parent;
|
||||
}
|
||||
|
||||
return this.getClosestThemedParent($parent.$parent);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
if (this.mdTheme) {
|
||||
return 'md-theme-' + this.mdTheme;
|
||||
}
|
||||
|
||||
let theme = this.closestThemedParent.mdTheme;
|
||||
|
||||
if (!theme) {
|
||||
theme = this.closestThemedParent.mdName;
|
||||
}
|
||||
|
||||
return 'md-theme-' + (theme || Vue.material.currentTheme);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closestThemedParent = this.getClosestThemedParent(this.$parent);
|
||||
|
||||
if (!Vue.material.currentTheme) {
|
||||
Vue.material.setCurrentTheme('default');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -15,10 +15,7 @@ export default function install(Vue) {
|
|||
|
||||
install.installed = true;
|
||||
|
||||
Vue.material = {
|
||||
styles: [CoreTheme]
|
||||
};
|
||||
|
||||
Vue.use(MdTheme);
|
||||
Vue.use(MdInkRipple);
|
||||
Vue.material.styles.push(CoreTheme);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue