Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-03 13:04:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #213 from marcosmoura/develop

Browse source 
Develop
This commit is contained in:
Marcos Moura 2016-12-16 02:47:32 -02:00 committed by GitHub
commit 0bbd6287bd
89 changed files with 2661 additions and 739 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -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+
@ -113,6 +82,7 @@ Vue Material supports the latest version of all Browsers. This means:
* Opera 40+
* IE 11
* Edge
<small>May work in other browsers but it's untested.</small>
## Changelog

59
docs/src/App.vue
View file

@ -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>
@ -101,6 +99,10 @@
<router-link exact to="/components/sidenav">Sidenav</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/spinner">Spinner</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/components/subheader">Subheader</router-link>
</md-list-item>
@ -133,19 +135,18 @@
</md-list-item>
<md-list-item>
<router-link exact to="/ui-elements/typography">Typography</router-link>
<!-- <span>UI Elements</span>
<span>UI Elements</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset">
<router-link exact to="/ui-elements/layout">Layout</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link exact to="/ui-elements/grid-system">Grid System</router-link>
<router-link exact to="/ui-elements/typography">Typography</router-link>
</md-list-item>
</md-list>
</md-list-expand> -->
</md-list-expand>
</md-list-item>
<md-list-item>
@ -159,7 +160,7 @@
</div>
</md-sidenav>
<transition name="md-router">
<transition name="md-router" appear>
<router-view></router-view>
</transition>
</div>
@ -170,9 +171,14 @@
$sizebar-size: 280px;
[v-cloak] {
display: none;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
@ -254,7 +260,10 @@
padding: 16px;
flex: 1;
overflow: auto;
background-color: #fff;
transform: translate3D(0, 0, 0);
transition: $swift-ease-out;
transition-delay: .2s;
}
.md-router-enter-active,
@ -263,16 +272,30 @@
top: 0;
right: 0;
left: 0;
transition: $swift-ease-out;
@media (min-width: 1281px) {
left: 280px;
left: $sizebar-size;
}
.main-content {
opacity: 0;
overflow: hidden;
}
}
.md-router-enter,
.md-router-leave-active {
opacity: 0;
z-index: 1;
transition: $swift-ease-in;
transition-duration: .25s;
}
.md-router-enter-active {
z-index: 2;
transition: $swift-ease-out;
.main-content {
transform: translate3D(0, 7%, 0);
}
}
code {
@ -292,6 +315,8 @@
</style>
<script>
import Vue from 'vue';
export default {
data() {
return {
@ -302,7 +327,7 @@
},
computed: {
logo() {
return 'assets/logo-vue-material-' + this.theme + '.png';
return 'assets/logo-vue-material-' + Vue.material.currentTheme + '.png';
}
},
methods: {

BIN
docs/src/assets/logo-vue-material-purple.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

4
docs/src/components/ExampleBox.vue
View file

@ -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">
&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
&lt;div id=&quot;app&quot;&gt;
### TEMPLATE ###
&lt;/div&gt;
</pre>

6
docs/src/components/PageContent.vue
View file

@ -8,10 +8,10 @@
<div class="md-title">{{ pageTitle }}</div>
<div class="release-version">
<div class="release-version" v-if="availableDocs.length">
<span>Version:</span>
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs" v-if="availableDocs.length" v-once>
<md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
<md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
</md-select>
</div>

12
docs/src/config.js
View file

@ -3,11 +3,15 @@ import VueMaterial from '../../src';
Vue.use(VueMaterial);
Vue.material.theme.registerAll({
Vue.material.registerTheme({
default: {
primary: 'blue',
accent: 'pink'
},
blue: {
primary: 'blue',
accent: 'pink'
},
indigo: {
primary: 'indigo',
accent: 'pink'
@ -22,11 +26,7 @@ Vue.material.theme.registerAll({
},
orange: {
primary: 'orange',
accent: 'green'
},
blue: {
primary: 'blue',
accent: 'pink'
accent: 'purple'
},
green: {
primary: 'green',

22
docs/src/index.js
View file

@ -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 = 'purple';
} 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();
});
});

54
docs/src/pages/GettingStarted.vue
View file

@ -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">
&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
&lt;md-toolbar&gt;
&lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-button&gt;My Button&lt;/md-button&gt;
&lt;/div&gt;
</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">
&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
&lt;md-toolbar&gt;
&lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
&lt;/div&gt;
</code-block>
</md-tab>
</md-tabs>
</section>
</article>
<article>
<h2 class="md-headline">Codepen Examples</h2>

84
docs/src/pages/components/BottomBar.vue
View file

@ -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">
&lt;md-bottom-bar&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-theme=&quot;orange&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
&lt;md-bottom-bar&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-theme=&quot;teal&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
&lt;md-bottom-bar md-shift&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-shift md-theme=&quot;green&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
&lt;md-bottom-bar md-shift&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-shift md-theme=&quot;indigo&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
</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">
&lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;md-theme :md-name=&quot;playground.theme&quot;&gt;
&lt;md-bottom-bar md-shift&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
</code-block>
<code-block lang="javascript">

28
docs/src/pages/components/Buttons.vue
View file

@ -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">
&lt;md-button class=&quot;md-primary&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;Indigo&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;Teal&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-primary&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
&lt;md-button md-theme=&quot;indigo&quot; class=&quot;md-primary&quot;&gt;Indigo&lt;/md-button&gt;
&lt;md-button md-theme=&quot;teal&quot; class=&quot;md-raised md-primary&quot;&gt;Teal&lt;/md-button&gt;
&lt;md-button md-theme=&quot;orange&quot; class=&quot;md-icon-button md-primary&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
&lt;md-button md-theme=&quot;green&quot; class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
&lt;md-button md-theme=&quot;brown&quot; class=&quot;md-fab md-primary&quot;&gt;
&lt;md-icon&gt;dialpad&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>

159
docs/src/pages/components/Card.vue
View file

@ -6,6 +6,11 @@
<p>The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.</p>
<p>You can also use other Material components inside the card, like the "Complete Example".</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">
@ -818,9 +823,159 @@
</div>
</example-box>
<example-box card-title="Themes">
<div class="card-holder" slot="demo">
<md-card class="md-primary">
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-accent">
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-menu md-size="4" md-direction="bottom left">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>
<md-menu-item>
<span>Send a message</span>
<md-icon>message</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-header>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-warn">
<md-card-media>
<img src="assets/card-image-2.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-card class="md-primary"&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-header&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header&gt;
&lt;md-card-actions&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;md-card-content&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
&lt;/md-card-content&gt;
&lt;/md-card&gt;
&lt;md-card class="md-accent"&gt;
&lt;md-card-header&gt;
&lt;md-card-header-text&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header-text&gt;
&lt;md-menu md-size=&quot;4&quot; md-direction=&quot;bottom left&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Call&lt;/span&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Send a message&lt;/span&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;/md-card-header&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-content&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
&lt;/md-card-content&gt;
&lt;/md-card&gt;
&lt;md-card class="md-warn"&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-2.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-header&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header&gt;
&lt;md-card-actions &gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
</code-block>
</div>
</example-box>
<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">
@ -859,7 +1014,7 @@
<div slot="code">
<code-block lang="xml">
&lt;md-card class=&quot;card-example&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
&lt;md-card class=&quot;card-example&quot;&gt;
&lt;md-card-area md-inset&gt;
&lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
&lt;img src=&quot;assets/card-example.jpg&quot; alt=&quot;Coffee House&quot;&gt;

54
docs/src/pages/components/Checkbox.vue
View file

@ -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">
&lt;div v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
&lt;md-checkbox id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;&#039;green&#039;&quot;&gt;
&lt;md-checkbox id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
&lt;md-checkbox id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;
&lt;md-checkbox id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
&lt;md-checkbox id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;md-checkbox md-name=&quot;orange&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
&lt;md-checkbox md-name=&quot;green&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
&lt;md-checkbox md-name=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
&lt;md-checkbox md-name=&quot;indigo&quot; id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
&lt;md-checkbox md-name=&quot;brown&quot; id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
</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() {

43
docs/src/pages/components/Icon.vue
View file

@ -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">
&lt;md-icon v-md-theme=&quot;&apos;light-blue&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon v-md-theme=&quot;&apos;green&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon v-md-theme=&quot;&apos;brown&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon v-md-theme=&quot;&apos;orange&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;light-blue&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;green&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;brown&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;orange&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
</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> -->

40
docs/src/pages/components/Input.vue
View file

@ -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">
&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
&lt;div v-md-theme=&quot;&apos;green&apos;&quot;&gt;
&lt;md-input-container&gt;
&lt;label&gt;Green - Input&lt;/label&gt;
&lt;md-input&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;/div&gt;
&lt;md-input-container md-theme=&quot;green&quot;&gt;
&lt;label&gt;Green - Input&lt;/label&gt;
&lt;md-input&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;div v-md-theme=&quot;&apos;cyan&apos;&quot;&gt;
&lt;md-input-container&gt;
&lt;label&gt;Cyan - Textarea&lt;/label&gt;
&lt;md-textarea&gt;&lt;/md-textarea&gt;
&lt;/md-input-container&gt;
&lt;/div&gt;
&lt;md-input-container md-theme=&quot;red&quot;&gt;
&lt;label&gt;Red - Textarea&lt;/label&gt;
&lt;md-textarea&gt;&lt;/md-textarea&gt;
&lt;/md-input-container&gt;
&lt;/form&gt;
</code-block>
</div>

32
docs/src/pages/components/Radio.vue
View file

@ -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">
&lt;div v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
&lt;md-theme md-name=&quot;orange&quot;&gt;
&lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test13&quot; name=&quot;my-test-group4&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Orange radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test14&quot; name=&quot;my-test-group4&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Orange radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test15&quot; name=&quot;my-test-group4&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Orange radio&lt;/md-radio&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;div v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
&lt;md-theme md-name=&quot;brown&quot;&gt;
&lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test16&quot; name=&quot;my-test-group4&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Brown radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test17&quot; name=&quot;my-test-group4&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Brown radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test18&quot; name=&quot;my-test-group4&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Brown radio&lt;/md-radio&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;div v-md-theme=&quot;&#039;green&#039;&quot;&gt;
&lt;md-theme md-name=&quot;green&quot;&gt;
&lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test19&quot; name=&quot;my-test-group6&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Green radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test20&quot; name=&quot;my-test-group6&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Green radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test21&quot; name=&quot;my-test-group6&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Green radio&lt;/md-radio&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;div v-md-theme=&quot;&#039;teal&#039;&quot;&gt;
&lt;md-theme md-name=&quot;teal&quot;&gt;
&lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test22&quot; name=&quot;my-test-group3&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Teal radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test23&quot; name=&quot;my-test-group3&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot; disabled&gt;Teal disabled radio&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test24&quot; name=&quot;my-test-group3&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Teal radio&lt;/md-radio&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
</code-block>
</div>
</example-box>

76
docs/src/pages/components/Select.vue
View file

@ -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 @@
&lt;md-option value=&quot;verdana&quot;&gt;Verdana&lt;/md-option&gt;
&lt;/md-select&gt;
&lt;/md-input-container&gt;
&lt;md-input-container&gt;
&lt;label for=&quot;food&quot;&gt;Food&lt;/label&gt;
&lt;md-select name=&quot;food&quot; id=&quot;food&quot; v-model=&quot;food&quot;&gt;
&lt;md-subheader&gt;Fruits&lt;/md-subheader&gt;
&lt;md-option value=&quot;apples&quot;&gt;Apples&lt;/md-option&gt;
&lt;md-option value=&quot;bananas&quot;&gt;Bananas&lt;/md-option&gt;
&lt;md-option value=&quot;peaches&quot;&gt;Peaches&lt;/md-option&gt;
&lt;md-option value=&quot;oranges&quot;&gt;Oranges&lt;/md-option&gt;
&lt;md-subheader&gt;Vegetables&lt;/md-subheader&gt;
&lt;md-option value=&quot;carrots&quot;&gt;Carrots&lt;/md-option&gt;
&lt;md-option value=&quot;cucumbers&quot;&gt;Cucumbers&lt;/md-option&gt;
&lt;md-subheader&gt;Baked Goods&lt;/md-subheader&gt;
&lt;md-option value=&quot;apple_pie&quot;&gt;Apple Pie&lt;/md-option&gt;
&lt;md-option value=&quot;chocolate_cake&quot;&gt;Chocolate Cake&lt;/md-option&gt;
&lt;/md-select&gt;
&lt;/md-input-container&gt;
&lt;/div&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
@ -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">
&lt;md-input-container&gt;
&lt;label for=&quot;food&quot;&gt;Food&lt;/label&gt;
&lt;md-select name=&quot;food&quot; id=&quot;food&quot; v-model=&quot;food&quot;&gt;
&lt;md-subheader&gt;Fruits&lt;/md-subheader&gt;
&lt;md-option value=&quot;apples&quot;&gt;Apples&lt;/md-option&gt;
&lt;md-option value=&quot;bananas&quot;&gt;Bananas&lt;/md-option&gt;
&lt;md-option value=&quot;peaches&quot;&gt;Peaches&lt;/md-option&gt;
&lt;md-option value=&quot;oranges&quot;&gt;Oranges&lt;/md-option&gt;
&lt;md-subheader&gt;Vegetables&lt;/md-subheader&gt;
&lt;md-option value=&quot;carrots&quot;&gt;Carrots&lt;/md-option&gt;
&lt;md-option value=&quot;cucumbers&quot;&gt;Cucumbers&lt;/md-option&gt;
&lt;md-subheader&gt;Baked Goods&lt;/md-subheader&gt;
&lt;md-option value=&quot;apple_pie&quot;&gt;Apple Pie&lt;/md-option&gt;
&lt;md-option value=&quot;chocolate_cake&quot;&gt;Chocolate Cake&lt;/md-option&gt;
&lt;/md-select&gt;
&lt;/md-input-container&gt;
&lt;md-input-container&gt;
&lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
&lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;

258
docs/src/pages/components/Spinner.vue Normal file
View file

@ -0,0 +1,258 @@
<template>
<page-content page-title="Components - Spinner">
<docs-component>
<div slot="description">
<p>Progress and activity indicators are visual indications of an app loading content.</p>
<p>The following classes can be applied to change the color palette:</p>
<ul class="md-body-2">
<li><code>md-accent</code></li>
<li><code>md-warn</code></li>
</ul>
</div>
<div slot="api">
<api-table name="md-spinner">
<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-size</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>The spinner size. Default <code>50</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-stroke</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>The line width. Default <code>3.5</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-indeterminate</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-progress</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Define the current progress of the spinner. Default <code>0</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<div slot="example">
<example-box card-title="Determinate">
<div class="spinner-demo" slot="demo">
<md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
<md-spinner :md-progress="progress" v-if="transition"></md-spinner>
<md-spinner :md-progress="progress" v-if="transition" class="md-accent"></md-spinner>
<md-spinner :md-progress="progress" v-if="transition" class="md-warn"></md-spinner>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-spinner :md-progress=&quot;progress&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-progress=&quot;progress&quot; class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-progress=&quot;progress&quot; class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Indeterminate">
<div class="spinner-demo" slot="demo">
<md-spinner md-indeterminate></md-spinner>
<md-spinner md-indeterminate class="md-accent"></md-spinner>
<md-spinner md-indeterminate class="md-warn"></md-spinner>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-spinner md-indeterminate&gt;&lt;/md-spinner&gt;
&lt;md-spinner md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Sizes">
<div class="spinner-demo" slot="demo">
<md-spinner :md-size="20" md-indeterminate class="md-accent"></md-spinner>
<md-spinner :md-size="60" md-indeterminate class="md-warn"></md-spinner>
<md-spinner :md-size="150" md-indeterminate></md-spinner>
<md-spinner :md-size="20" :md-stroke="2.5" md-indeterminate class="md-accent"></md-spinner>
<md-spinner :md-size="60" :md-stroke="1.5" md-indeterminate class="md-warn"></md-spinner>
<md-spinner :md-size="150" :md-stroke="1" md-indeterminate></md-spinner>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-spinner :md-size=&quot;20&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;60&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;150&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;20&quot; :md-stroke=&quot;2&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;60&quot; :md-stroke=&quot;1.5&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;150&quot; :md-stroke=&quot;1&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Complete Example">
<div slot="demo">
<md-theme class="complete-example" md-name="orange">
<md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
<md-icon v-if="!done">cloud_upload</md-icon>
<md-icon v-if="done">done</md-icon>
</md-button>
<md-spinner :md-size="74" :md-stroke="2.2" :md-progress="progress" v-if="transition && progress < 115"></md-spinner>
</md-theme>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-theme class=&quot;complete-example&quot; md-name=&quot;orange&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; @click.native=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
&lt;md-icon v-if=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
&lt;md-icon v-if=&quot;done&quot;&gt;done&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-spinner :md-size=&quot;74&quot; :md-stroke=&quot;2.2&quot; :md-progress=&quot;progress&quot; v-if=&quot;transition &amp;&amp; progress &lt; 115&quot;&gt;&lt;/md-spinner&gt;
&lt;/md-theme&gt;
</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">
export default {
data: () => ({
progress: 0,
progressInterval: null,
done: false,
transition: true
}),
methods: {
startProgress() {
this.progressInterval = window.setInterval(() => {
this.progress += 3;
if (this.progress > 115) {
this.done = true;
window.clearInterval(this.progressInterval);
window.setTimeout(() => {
this.done = false;
}, 3000);
}
}, 100);
},
restartProgress() {
this.progress = 0;
this.transition = false;
this.done = false;
window.clearInterval(this.progressInterval);
window.setTimeout(() => {
this.transition = true;
this.startProgress();
}, 600);
}
}
};
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.spinner-demo {
min-height: 55px;
}
.complete-example {
width: 56px;
height: 56px;
position: relative;
.md-fab {
margin: 0;
}
.md-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<script>
export default {
data: () => ({
progress: 0,
progressInterval: null,
done: false,
transition: true
}),
methods: {
startProgress() {
this.progressInterval = window.setInterval(() => {
this.progress += 3;
if (this.progress > 115) {
this.done = true;
window.clearInterval(this.progressInterval);
window.setTimeout(() => {
this.done = false;
}, 3000);
}
}, 100);
},
restartProgress() {
this.progress = 0;
this.transition = false;
this.done = false;
window.clearInterval(this.progressInterval);
window.setTimeout(() => {
this.transition = true;
this.startProgress();
}, 600);
}
},
mounted() {
this.startProgress();
}
};
</script>

6
docs/src/pages/components/Subheader.vue
View file

@ -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">

55
docs/src/pages/components/Switch.vue
View file

@ -96,21 +96,10 @@
<div slot="code">
<code-block lang="xml">
&lt;div&gt;
&lt;md-switch v-model=&quot;checked0&quot; id=&quot;my-test0&quot; name=&quot;my-test0&quot;&gt;&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;md-switch v-model=&quot;checked1&quot; id=&quot;my-test1&quot; name=&quot;my-test1&quot; class=&quot;md-primary&quot;&gt;Primary Color&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;md-switch v-model=&quot;checked2&quot; id=&quot;my-test2&quot; name=&quot;my-test2&quot; class=&quot;md-warn&quot;&gt;Warn Color&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;md-switch v-model=&quot;checked3&quot; id=&quot;my-test3&quot; name=&quot;my-test3&quot; disabled&gt;Disabled&lt;/md-switch&gt;
&lt;/div&gt;
&lt;md-switch v-model=&quot;checked0&quot; id=&quot;my-test0&quot; name=&quot;my-test0&quot;&gt;&lt;/md-switch&gt;
&lt;md-switch v-model=&quot;checked1&quot; id=&quot;my-test1&quot; name=&quot;my-test1&quot; class=&quot;md-primary&quot;&gt;Primary Color&lt;/md-switch&gt;
&lt;md-switch v-model=&quot;checked2&quot; id=&quot;my-test2&quot; name=&quot;my-test2&quot; class=&quot;md-warn&quot;&gt;Warn Color&lt;/md-switch&gt;
&lt;md-switch v-model=&quot;checked3&quot; id=&quot;my-test3&quot; name=&quot;my-test3&quot; disabled&gt;Disabled&lt;/md-switch&gt;
</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">
&lt;div v-md-theme=&quot;'orange'&quot;&gt;
&lt;md-switch v-model=&quot;checked4&quot; id=&quot;my-test4&quot; name=&quot;my-test4&quot; class=&quot;md-primary&quot;&gt;&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;'green'&quot;&gt;
&lt;md-switch v-model=&quot;checked5&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; class=&quot;md-primary&quot;&gt;Green Primary Color&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;'brown'&quot;&gt;
&lt;md-switch v-model=&quot;checked6&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; class=&quot;md-primary&quot;&gt;Brown Primary Color&lt;/md-switch&gt;
&lt;/div&gt;
&lt;div v-md-theme=&quot;'light-blue'&quot;&gt;
&lt;md-switch v-model=&quot;checked7&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; class=&quot;md-primary&quot; disabled&gt;Light Blue Primary Color Disabled&lt;/md-switch&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;md-switch md-theme=&quot;orange&quot; v-model=&quot;checked4&quot; id=&quot;my-test4&quot; name=&quot;my-test4&quot; class=&quot;md-primary&quot;&gt;&lt;/md-switch&gt;
&lt;md-switch md-theme=&quot;green&quot; v-model=&quot;checked5&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; class=&quot;md-primary&quot;&gt;Green Primary Color&lt;/md-switch&gt;
&lt;md-switch md-theme=&quot;brown&quot; v-model=&quot;checked6&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; class=&quot;md-primary&quot;&gt;Brown Primary Color&lt;/md-switch&gt;
&lt;md-switch md-theme=&quot;light-blue&quot; v-model=&quot;checked7&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; class=&quot;md-primary&quot; disabled&gt;Light Blue Primary Color Disabled&lt;/md-switch&gt;
</code-block>
</div>
</example-box>

22
docs/src/pages/components/Tabs.vue
View file

@ -115,6 +115,18 @@
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the tab and prevent his actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-tooltip</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Add a tooltip on the tab header. Default: No tooltip.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-tooltip-direction</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Direction of the tab header tooltip. Default: <code>bottom</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
@ -137,7 +149,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="pictures" md-label="Pictures">
<md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
@ -159,7 +171,7 @@
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot;&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;This is the pictures tab!&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;/md-tabs&gt;
@ -169,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>
@ -215,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>
@ -261,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>

136
docs/src/pages/components/Toolbar.vue
View file

@ -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">
&lt;md-toolbar v-md-theme=&quot;&#039;green&#039;&quot;&gt;
&lt;md-toolbar md-theme=&quot;green&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
&lt;/md-button&gt;
@ -368,7 +368,7 @@
&lt;/md-button&gt;
&lt;/md-toolbar&gt;
&lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
&lt;md-toolbar class=&quot;md-large&quot; md-theme=&quot;brown&quot;&gt;
&lt;div class=&quot;md-toolbar-container&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
@ -390,7 +390,7 @@
&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-toolbar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
&lt;md-toolbar md-theme=&quot;orange&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
&lt;/md-button&gt;
@ -401,7 +401,7 @@
&lt;md-button&gt;Remove&lt;/md-button&gt;
&lt;/md-toolbar&gt;
&lt;md-toolbar v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
&lt;md-toolbar md-theme=&quot;blue&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
&lt;/md-button&gt;
@ -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">
&lt;div class=&quot;phone-viewport complete-example&quot;&gt;
&lt;md-whiteframe md-elevation=&quot;2&quot;&gt;
&lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
&lt;div class=&quot;md-toolbar-container&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;2&quot; md-theme=&quot;light-blue&quot; class=&quot;md-large&quot;&gt;
&lt;div class=&quot;md-toolbar-container&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
&lt;md-icon&gt;menu&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
&lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;search&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;search&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;view_module&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/div&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;view_module&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/div&gt;
&lt;div class=&quot;md-toolbar-container&quot;&gt;
&lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
&lt;div class=&quot;md-toolbar-container&quot;&gt;
&lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
&lt;md-button class=&quot;md-fab md-mini&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-button class=&quot;md-fab md-mini&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/div&gt;
&lt;/md-whiteframe&gt;
&lt;md-list class=&quot;md-double-line&quot;&gt;
@ -700,7 +696,7 @@
&lt;md-subheader class=&quot;md-inset&quot;&gt;Files&lt;/md-subheader&gt;
&lt;md-list-item&gt;
&lt;md-avatar v-md-theme=&quot;&#039;blue&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-avatar md-theme=&quot;blue&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt;
&lt;/md-avatar&gt;
@ -715,7 +711,7 @@
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-avatar md-theme=&quot;orange&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-icon&gt;collections&lt;/md-icon&gt;
&lt;/md-avatar&gt;
@ -730,7 +726,7 @@
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-avatar v-md-theme=&quot;&#039;green&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-avatar md-theme=&quot;green&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-icon&gt;view_list&lt;/md-icon&gt;
&lt;/md-avatar&gt;
@ -745,7 +741,7 @@
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-avatar md-theme=&quot;orange&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
&lt;md-icon&gt;collections&lt;/md-icon&gt;
&lt;/md-avatar&gt;
@ -760,8 +756,8 @@
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;md-sidenav class=&quot;md-left&quot; ref=&quot;sidenav&quot;&gt;
&lt;md-toolbar class=&quot;md-account-header&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
&lt;md-sidenav md-theme=&quot;blue&quot; class=&quot;md-left&quot; ref=&quot;sidenav&quot;&gt;
&lt;md-toolbar class=&quot;md-account-header&quot;&gt;
&lt;md-list class=&quot;md-transparent&quot;&gt;
&lt;md-list-item class=&quot;md-avatar-list&quot;&gt;
&lt;md-avatar class=&quot;md-large&quot;&gt;
@ -792,7 +788,7 @@
&lt;/md-list&gt;
&lt;/md-toolbar&gt;
&lt;md-list v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
&lt;md-list&gt;
&lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
&lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
&lt;/md-list-item&gt;
@ -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;
}

35
docs/src/pages/themes/Configuration.vue
View file

@ -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">
&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt; &lt;!-- Closest element in a Vue Instance --&gt;
&lt;md-toolbar&gt;
&lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
&lt;/div&gt;
<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&amp;theme-id=dark&amp;default-tab=html,result&amp;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>

515
docs/src/pages/themes/DynamicThemes.vue
View file

@ -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>&lt;md-theme&gt;</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>&lt;div&gt;</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">
&lt;div class=&quot;app-example&quot;&gt;
&lt;md-theme md-name=&quot;blue&quot;&gt;
&lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;1&quot;&gt;
&lt;span class=&quot;md-title&quot;&gt;Life Organizer 2.0&lt;/span&gt;
&lt;/md-whiteframe&gt;
&lt;/md-theme&gt;
&lt;div class=&quot;page-layout&quot;&gt;
&lt;md-theme md-name=&quot;indigo&quot;&gt;
&lt;div class=&quot;column&quot;&gt;
&lt;strong class=&quot;md-subheading&quot;&gt;Shopping list&lt;/strong&gt;
&lt;md-list&gt;
&lt;md-list-item&gt;
&lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
&lt;span class=&quot;item-text&quot;&gt;French bread&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-checkbox :value=&quot;true&quot; class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
&lt;span class=&quot;item-text&quot;&gt;Brazilian Cheese Bread&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
&lt;span class=&quot;item-text&quot;&gt;Italian Bread&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;md-theme md-name=&quot;green&quot;&gt;
&lt;div class=&quot;column&quot;&gt;
&lt;strong class=&quot;md-subheading&quot;&gt;Todo List&lt;/strong&gt;
&lt;md-list&gt;
&lt;md-list-item&gt;
&lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
&lt;span class=&quot;item-text&quot;&gt;Create new components&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-checkbox :value=&quot;true&quot; class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
&lt;span class=&quot;item-text&quot;&gt;Answer Github issues&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;md-theme md-name=&quot;orange&quot;&gt;
&lt;div class=&quot;column&quot;&gt;
&lt;strong class=&quot;md-subheading&quot;&gt;Notes&lt;/strong&gt;
&lt;md-list&gt;
&lt;md-list-item&gt;
&lt;span class=&quot;item-text&quot;&gt;Wake up early&lt;/span&gt;
&lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
&lt;md-icon&gt;star&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;span class=&quot;item-text&quot;&gt;Have breakfast everyday&lt;/span&gt;
&lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
&lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;span class=&quot;item-text&quot;&gt;Contribution&lt;/span&gt;
&lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
&lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;span class=&quot;item-text&quot;&gt;Travels&lt;/span&gt;
&lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
&lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
&lt;/md-theme&gt;
&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;md-whiteframe&gt;
&lt;md-toolbar md-theme=&quot;blue&quot;&gt;
&lt;span class=&quot;md-title&quot;&gt;My app dashboard&lt;/span&gt;
&lt;/md-toolbar&gt;
&lt;/md-whiteframe&gt;
&lt;div class=&quot;card-layout&quot;&gt;
&lt;div class=&quot;column&quot;&gt;
&lt;md-card class=&quot;md-primary&quot; md-theme=&quot;blue&quot; md-with-hover&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-card-actions&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;favorite&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;bookmark&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;share&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
&lt;md-card class=&quot;md-primary&quot; md-theme=&quot;green&quot; md-with-hover&gt;
&lt;md-card-header&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header&gt;
&lt;md-card-content&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/md-card-content&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-card-actions&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
&lt;/div&gt;
&lt;div class=&quot;column&quot;&gt;
&lt;md-card class=&quot;md-primary&quot; md-theme=&quot;orange&quot; md-with-hover&gt;
&lt;md-card-header&gt;
&lt;md-card-header-text&gt;
&lt;div class=&quot;md-title&quot;&gt;Title here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header-text&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/avatar-2.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;/md-card-header&gt;
&lt;md-card-actions&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
&lt;md-card class=&quot;md-primary&quot; md-theme=&quot;blue&quot; md-with-hover&gt;
&lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
&lt;img src=&quot;assets/card-sky.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
&lt;md-card-actions&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;favorite&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;bookmark&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;share&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
&lt;/div&gt;
&lt;/div&gt;
</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>

9
docs/src/pages/ui-elements/GridSystem.vue
View file

@ -1,9 +0,0 @@
<template>
<page-content page-title="UI Elements - Grid System">
</page-content>
</template>
<style lang="scss" scoped>
</style>

466
docs/src/pages/ui-elements/Layout.vue Normal file
View file

@ -0,0 +1,466 @@
<template>
<page-content page-title="UI Elements - Layout">
<docs-component>
<div slot="description">
<p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.</p>
<p>By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the <code>md-gutter</code> property. If you want the automatic calculation the engine will set <code>16px</code> for small screens and then apply <code>24px</code> for medium to large.</p>
<p>You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.</p>
<p>The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:</p>
<md-table slot="properties" class="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Size</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><code>xsmall</code></md-table-cell>
<md-table-cell>600px</md-table-cell>
<md-table-cell>For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell><code>small</code></md-table-cell>
<md-table-cell>960px</md-table-cell>
<md-table-cell>For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell><code>medium</code></md-table-cell>
<md-table-cell>1280px</md-table-cell>
<md-table-cell>For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell><code>large</code></md-table-cell>
<md-table-cell>1920px</md-table-cell>
<md-table-cell>For screens who have between of 1280px and 1920px wide. For large desktop monitors.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell><code>xlarge</code></md-table-cell>
<md-table-cell>>1920px</md-table-cell>
<md-table-cell>For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</div>
<div slot="api">
<api-table name="md-layout">
<md-table slot="properties" class="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-tag</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The output tag. Default <code>div</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-gutter</md-table-cell>
<md-table-cell><code>Boolean|Number</code></md-table-cell>
<md-table-cell>Apply a gutter space to direct childs of the element that have this property. If <code>true</code> the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts <code>8</code>|<code>16</code>|<code>24</code>|<code>40</code>. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-row</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Create a row container. All child will be side by side.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-row-{type}</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Create a row container on screen sizes less than or equal to given breakpoint. Example: <code>md-row-large</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-column</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Create a column container. All child will be one underneath the other.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-column-{type}</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Create a column container on screen sizes less than or equal to given breakpoint. Example: <code>md-column-small</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-hide-{type}</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-flex</md-table-cell>
<md-table-cell><code>Boolean|Number</code></md-table-cell>
<md-table-cell>Create a flexible child. If <code>true</code> the child element will grow to fill the empty space available on the parent element. If <code>Number</code> the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: <code>true</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-flex-{type}</md-table-cell>
<md-table-cell><code>Boolean|Number</code></md-table-cell>
<md-table-cell>Create a flexible child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-small="33"</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-flex-offset</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Create a empty space before the actual child. Accepts the same value of <code>md-flex</code> Example: <code>md-flex-offset="50"</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<div slot="example">
<example-box card-title="Responsive">
<div class="layout-demo grid" slot="demo">
<md-layout class="color" md-gutter>
<md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
<div class="grid-content">
md-flex-medium="33" <br>
md-hide-xsmall
</div>
</md-layout>
<md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
<div class="grid-content">
md-flex-medium="33" <br>
md-hide-small
</div>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Sizes and Offset">
<div class="layout-demo grid" slot="demo">
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="33"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout></md-layout>
<md-layout md-flex="33" md-flex-offset="33"></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="75"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="25" md-flex-offset="25"></md-layout>
<md-layout md-flex="25"></md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Direction">
<div class="layout-demo grid" slot="demo">
<md-layout class="column-size" md-gutter>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="20"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Gutters">
<div class="layout-demo grid gutter" slot="demo">
<md-layout class="no-gutter color">
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout :md-gutter="8" class="color">
<md-layout>
<span>8px</span>
</md-layout>
<md-layout>
<span>8px</span>
</md-layout>
<md-layout>
<span>8px</span>
</md-layout>
<md-layout>
<span>8px</span>
</md-layout>
<md-layout>
<span>8px</span>
</md-layout>
<md-layout>
<span>8px</span>
</md-layout>
</md-layout>
<md-layout md-gutter="16" class="color">
<md-layout>
<span>16px</span>
</md-layout>
<md-layout>
<span>16px</span>
</md-layout>
<md-layout>
<span>16px</span>
</md-layout>
<md-layout>
<span>16px</span>
</md-layout>
<md-layout>
<span>16px</span>
</md-layout>
</md-layout>
<md-layout :md-gutter="24" class="color">
<md-layout>
<span>24px</span>
</md-layout>
<md-layout>
<span>24px</span>
</md-layout>
<md-layout>
<span>24px</span>
</md-layout>
<md-layout>
<span>24px</span>
</md-layout>
</md-layout>
<md-layout :md-gutter="40" class="color">
<md-layout>
<span>40px</span>
</md-layout>
<md-layout>
<span>40px</span>
</md-layout>
<md-layout>
<span>40px</span>
</md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout>
<span>Automatic</span>
</md-layout>
<md-layout>
<span>Automatic</span>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.layout-demo {
min-height: 100px;
}
.no-gutter > .md-layout:last-child:before {
background-color: rgba(#000, .2) !important;
}
.grid > .md-layout {
> .md-layout:not(.md-column) {
min-height: 40px;
margin-bottom: 16px;
}
}
.grid-content {
padding: 16px;
}
.gutter .color .md-layout {
color: rgba(#000, .54);
font-size: 13px;
font-weight: 500;
text-indent: 8px;
}
.color {
$sizes: (8, 16, 24, 40);
@each $item in $sizes {
$size: $item / 2 + px;
&:not(.md-column).md-gutter-#{$item} > .md-layout:before {
right: $size;
left: $size;
}
&.md-column.md-gutter-#{$item} > .md-layout:before {
top: $size;
bottom: $size;
}
}
> .md-layout {
position: relative;
&:before {
width: 100%;
height: 100%;
margin-bottom: -200%;
display: block;
pointer-events: none;
background-color: rgba(#000, .12);
content: " ";
}
}
}
.column-size {
height: 250px !important;
+ .column-size {
margin-top: 48px !important;
}
}
.color-red:before {
background-color: #F44336 !important;
}
.color-blue:before {
background-color: #2196F3 !important;
}
.color-yellow:before {
background-color: #FFEB3B !important;
}
.color-green:before {
background-color: #4CAF50 !important;
}
.color-purple:before {
background-color: #9C27B0 !important;
}
.color-pink:before {
background-color: #E91E63 !important;
}
.color-teal:before {
background-color: #009688 !important;
}
.color-orange:before {
background-color: #FF9800 !important;
}
.properties {
table tr td:first-child {
white-space: nowrap;
}
}
</style>

2
docs/src/pages/ui-elements/Typography.vue
View file

@ -1,5 +1,5 @@
<template>
<page-content page-title="Typography">
<page-content page-title="UI Elements - Typography">
<docs-component>
<div slot="description">
<h2 class="md-title">Styles</h2>

14
docs/src/routes.js
View file

@ -21,6 +21,7 @@ import Radio from './pages/components/Radio';
import InkRipple from './pages/components/InkRipple';
import Select from './pages/components/Select';
import Sidenav from './pages/components/Sidenav';
import Spinner from './pages/components/Spinner';
import Subheader from './pages/components/Subheader';
import Switch from './pages/components/Switch';
import Table from './pages/components/Table';
@ -31,7 +32,7 @@ import Whiteframe from './pages/components/Whiteframe';
/* UI Elements */
import Typography from './pages/ui-elements/Typography';
import GridSystem from './pages/ui-elements/GridSystem';
import Layout from './pages/ui-elements/Layout';
/* Themes */
import Configuration from './pages/themes/Configuration';
@ -141,6 +142,11 @@ const components = [
name: 'components:sidenav',
component: Sidenav
},
{
path: '/components/spinner',
name: 'components:spinner',
component: Spinner
},
{
path: '/components/switch',
name: 'components:switch',
@ -208,9 +214,9 @@ const uiElements = [
component: Typography
},
{
path: '/ui-elements/grid-system',
name: 'ui-elements:grid-system',
component: GridSystem
path: '/ui-elements/layout',
name: 'ui-elements:layout',
component: Layout
}
];

1
src/components/mdAvatar/mdAvatar.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-avatar,
&.md-avatar {
&.md-primary {
&.md-avatar-icon {

10
src/components/mdAvatar/mdAvatar.vue
View file

@ -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
src/components/mdBottomBar/mdBottomBar.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-bottom-bar,
&.md-bottom-bar {
&.md-fixed {
background-color: #{'BACKGROUND-COLOR'};

5
src/components/mdBottomBar/mdBottomBar.vue
View file

@ -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
src/components/mdButton/mdButton.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-button:not([disabled]),
&.md-button:not([disabled]) {
&.md-raised {
&:not(.md-icon-button) {

53
src/components/mdButton/mdButton.vue
View file

@ -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
src/components/mdButtonToggle/mdButtonToggle.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-button-toggle,
&.md-button-toggle {
.md-button {
&:after {

5
src/components/mdButtonToggle/mdButtonToggle.vue
View file

@ -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;

43
src/components/mdCard/mdCard.theme
View file

@ -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 {

5
src/components/mdCard/mdCard.vue
View file

@ -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
src/components/mdCheckbox/mdCheckbox.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-checkbox,
&.md-checkbox {
&.md-checked {
.md-checkbox-container {

5
src/components/mdCheckbox/mdCheckbox.vue
View file

@ -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

3
src/components/mdDialog/mdDialog.theme
View file

@ -1,6 +1,5 @@
.THEME_NAME {
.md-dialog,
&.md-dialog {
&.md-dialog-container .md-dialog {
background-color: #{'BACKGROUND-COLOR-A100'};
color: #{'BACKGROUND-CONTRAST'};
}

4
src/components/mdDialog/mdDialog.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="md-dialog-container" :class="classes" @keyup.esc.stop="closeOnEsc" tabindex="0">
<div class="md-dialog-container" :class="[themeClass, classes]" @keyup.esc.stop="closeOnEsc" 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
src/components/mdIcon/mdIcon.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-icon,
&.md-icon {
&.md-primary {
color: #{'PRIMARY-COLOR'};

10
src/components/mdIcon/mdIcon.vue
View file

@ -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
src/components/mdInputContainer/mdInputContainer.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-input-container,
&.md-input-container {
&.md-input-invalid {
&:after {

4
src/components/mdInputContainer/mdInputContainer.vue
View file

@ -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: '',

5
src/components/mdLayout/index.js Normal file
View file

@ -0,0 +1,5 @@
import mdLayout from './mdLayout.vue';
export default function install(Vue) {
Vue.component('md-layout', Vue.extend(mdLayout));
}

170
src/components/mdLayout/mdLayout.scss Normal file
View file

@ -0,0 +1,170 @@
@import '../../core/stylesheets/variables.scss';
@import '../../core/stylesheets/mixins.scss';
/* Rows and Columns */
.md-layout {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
@mixin layout($size: null) {
@if $size == null {
$size : '';
}
@if $size != '' {
$size : '-#{$size}';
}
.md-row#{$size} {
flex-direction: row;
}
.md-column#{$size} {
flex-direction: column;
}
}
@include layout();
/* Container */
.md-layout.md-container {
width: 100%;
max-width: 1200px;
&.md-centered {
margin: 0 auto;
}
}
/* Gutter Size */
@mixin layout-gutter($margin: -12px, $padding: 12px) {
&:not(.md-column) {
margin-right: $margin;
margin-left: $margin;
> .md-layout {
padding-right: $padding;
padding-left: $padding;
}
}
.md-column {
margin-top: $margin;
margin-bottom: $margin;
> .md-layout {
padding-top: $padding;
padding-bottom: $padding;
}
}
}
.md-gutter {
@include layout-gutter();
@include layout-small {
@include layout-gutter(-8px, 8px);
}
}
$sizes: (8, 16, 24, 40);
@each $item in $sizes {
$margin: -$item / 2 + px;
$padding: $item / 2 + px;
.md-gutter-#{$item} {
@include layout-gutter($margin, $padding);
}
}
/* Flex Size */
@mixin layout-flex($size: null) {
@if $size == null {
$size : '';
}
@if $size != '' {
$size : '-#{$size}';
}
.md-flex#{$size} {
flex: 1 1;
}
.md-flex#{$size}-33 {
min-width: 33.33333%;
flex: 0 1 33.33333%;
}
.md-flex#{$size}-66 {
min-width: 33.33333%;
flex: 0 1 66.66666%;
}
.md-flex-offset#{$size}-33 {
margin-left: 33.33333%;
}
.md-flex-offset#{$size}-66 {
margin-left: 66.66666%;
}
@for $i from 1 through 20 {
$counter: $i * 5;
.md-flex#{$size}-#{$counter} {
min-width: #{$counter + '%'};
flex: 0 1 #{$counter + '%'};
}
.md-flex-offset#{$size}-#{$counter} {
margin-left: #{$counter + '%'};
}
}
}
@include layout-flex();
/* Responsive Breakpoints */
@mixin breakpoint-layout($size) {
@include layout($size);
@include layout-flex($size);
.md-hide-#{$size} {
display: none;
}
}
@include layout-xlarge {
@include breakpoint-layout(xlarge);
}
@include layout-large {
@include breakpoint-layout(large);
}
@include layout-medium {
@include breakpoint-layout(medium);
}
@include layout-small {
@include breakpoint-layout(small);
}
@include layout-xsmall {
@include breakpoint-layout(xsmall);
}

102
src/components/mdLayout/mdLayout.vue Normal file
View file

@ -0,0 +1,102 @@
<style lang="scss" src="./mdLayout.scss"></style>
<script>
export default {
props: {
mdTag: {
type: String,
default: 'div'
},
mdRow: Boolean,
mdRowXsmall: Boolean,
mdRowSmall: Boolean,
mdRowMedium: Boolean,
mdRowLarge: Boolean,
mdRowXlarge: Boolean,
mdColumn: Boolean,
mdColumnXsmall: Boolean,
mdColumnSmall: Boolean,
mdColumnMedium: Boolean,
mdColumnLarge: Boolean,
mdColumnXlarge: Boolean,
mdHideXsmall: Boolean,
mdHideSmall: Boolean,
mdHideMedium: Boolean,
mdHideLarge: Boolean,
mdHideXlarge: Boolean,
mdGutter: [String, Number, Boolean],
mdFlex: [String, Number, Boolean],
mdFlexXsmall: [String, Number, Boolean],
mdFlexSmall: [String, Number, Boolean],
mdFlexMedium: [String, Number, Boolean],
mdFlexLarge: [String, Number, Boolean],
mdFlexXlarge: [String, Number, Boolean],
mdFlexOffset: [String, Number]
},
computed: {
classes() {
let classes = {
'md-row': this.mdRow,
'md-row-xsmall': this.mdRowXsmall,
'md-row-small': this.mdRowSmall,
'md-row-medium': this.mdRowMedium,
'md-row-large': this.mdRowLarge,
'md-row-xlarge': this.mdRowXlarge,
'md-column': this.mdColumn,
'md-column-xsmall': this.mdColumnXsmall,
'md-column-small': this.mdColumnSmall,
'md-column-medium': this.mdColumnMedium,
'md-column-large': this.mdColumnLarge,
'md-column-xlarge': this.mdColumnXlarge,
'md-hide-xsmall': this.mdHideXsmall,
'md-hide-small': this.mdHideSmall,
'md-hide-medium': this.mdHideMedium,
'md-hide-large': this.mdHideLarge,
'md-hide-xlarge': this.mdHideXlarge
};
if (this.mdGutter) {
if (typeof this.mdGutter === 'boolean') {
classes['md-gutter'] = true;
} else if (this.mdGutter) {
classes['md-gutter-' + this.mdGutter] = true;
}
}
if (this.mdFlexOffset) {
classes['md-flex-offset-' + this.mdFlexOffset] = true;
}
this.generateFlexClasses('', 'mdFlex', classes);
this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
this.generateFlexClasses('small', 'mdFlexSmall', classes);
this.generateFlexClasses('medium', 'mdFlexMedium', classes);
this.generateFlexClasses('large', 'mdFlexLarge', classes);
this.generateFlexClasses('xlarge', 'mdFlexXlarge', classes);
return classes;
}
},
methods: {
generateFlexClasses(size, name, object) {
if (size) {
size = '-' + size;
}
if (this[name]) {
if (typeof this[name] === 'boolean') {
object['md-flex' + size] = true;
} else {
object['md-flex' + size + '-' + this[name]] = true;
}
}
}
},
render(createElement) {
return createElement(this.mdTag, {
staticClass: 'md-layout',
class: this.classes
}, this.$slots.default);
}
};
</script>

1
src/components/mdList/mdList.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-list,
&.md-list {
background-color: #{'BACKGROUND-COLOR-A100'};
color: #{'BACKGROUND-CONTRAST'};

10
src/components/mdList/mdList.vue
View file

@ -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>

20
src/components/mdList/mdListItem.vue
View file

@ -16,8 +16,8 @@
let listItemSpec = {
staticClass: 'md-list-item',
on: {
click: () => {
this.$emit('click');
click: ($event) => {
this.$emit('click', $event);
}
}
};
@ -26,13 +26,14 @@
return createElement('div', { staticClass: holderClass }, content);
};
let createRipple = () => {
return createElement('md-ink-ripple');
};
let createCompatibleRouterLink = () => {
slot[0].data.staticClass = containerClass + ' ' + holderClass;
slot[0].data.directives = [{
name: 'md-ink-ripple'
}];
return createElement('li', listItemSpec, slot);
return createElement('li', listItemSpec, [...slot, createRipple()]);
};
let prepareExpandList = () => {
@ -92,11 +93,8 @@
handleExpandClick(this);
this.$emit('click');
}
},
directives: [{
name: 'md-ink-ripple'
}]
}, [createItemHolder(slot)]);
}
}, [createItemHolder(slot), createRipple()]);
};
let createExpandList = () => {

11
src/components/mdMenu/mdMenu.scss
View file

@ -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 {

18
src/components/mdMenu/mdMenu.theme
View file

@ -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'};
}
}
}
}

4
src/components/mdMenu/mdMenu.vue
View file

@ -123,8 +123,8 @@
position = getInViewPosition(this.menuContent, position);
this.menuContent.style.top = position.top + 'px';
this.menuContent.style.left = position.left + 'px';
this.menuContent.style.top = position.top + window.pageYOffset + 'px';
this.menuContent.style.left = position.left + window.pageXOffset + 'px';
},
recalculateOnResize() {
window.requestAnimationFrame(this.calculateMenuContentPos);

4
src/components/mdMenu/mdMenuContent.vue
View file

@ -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
src/components/mdRadio/mdRadio.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-radio,
&.md-radio {
.md-radio-container:after {
background-color: #{'ACCENT-COLOR'};

5
src/components/mdRadio/mdRadio.vue
View file

@ -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 {

46
src/components/mdSelect/mdSelect.scss
View file

@ -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;

11
src/components/mdSelect/mdSelect.theme
View file

@ -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,

6
src/components/mdSelect/mdSelect.vue
View file

@ -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
src/components/mdSidenav/mdSidenav.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-sidenav,
&.md-sidenav {
.md-sidenav-content {
background-color: #{'BACKGROUND-COLOR-A100'};

5
src/components/mdSidenav/mdSidenav.vue
View file

@ -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';

8
src/components/mdSpinner/index.js Normal file
View file

@ -0,0 +1,8 @@
import mdSpinner from './mdSpinner.vue';
import mdSpinnerTheme from './mdSpinner.theme';
export default function install(Vue) {
Vue.component('md-spinner', Vue.extend(mdSpinner));
Vue.material.styles.push(mdSpinnerTheme);
}

95
src/components/mdSpinner/mdSpinner.scss Normal file
View file

@ -0,0 +1,95 @@
@import '../../core/stylesheets/variables.scss';
.md-spinner {
display: inline-block;
position: relative;
pointer-events: none;
will-change: transform, opacity;
&.md-indeterminate {
.md-spinner-draw {
animation: spinner-rotate 1.9s linear infinite;
transform: rotate(0deg) translateZ(0);
}
.md-spinner-path {
stroke-dasharray: 2, 200;
animation: spinner-dash 1.425s ease-in-out infinite;
}
}
&.md-spinner-leave-active {
opacity: 0;
transform: scale(.8) translateZ(0);
transition: $swift-ease-out;
}
&:not(.md-indeterminate) {
&.md-spinner-enter-active {
transition-duration: 2s;
.md-spinner-draw {
animation: spinner-initial-rotate 1.98s $swift-ease-out-timing-function forwards;
}
}
}
}
.md-spinner-draw {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotate(270deg) translateZ(0);
transform-origin: center center;
will-change: transform, opacity;
}
.md-spinner-path {
fill: none;
stroke-dashoffset: 0;
stroke-miterlimit: 10;
transition: $swift-ease-out;
}
@keyframes spinner-rotate {
to {
transform: rotate(360deg) translateZ(0);
}
}
@keyframes spinner-initial-rotate {
0% {
opacity: 0;
transform: rotate(-90deg) translateZ(0);
}
20% {
opacity: 1;
}
100% {
transform: rotate(270deg) translateZ(0);
}
}
@keyframes spinner-dash {
0% {
stroke-dasharray: 2, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}

19
src/components/mdSpinner/mdSpinner.theme Normal file
View file

@ -0,0 +1,19 @@
.THEME_NAME {
&.md-spinner {
.md-spinner-path {
stroke: #{'PRIMARY-COLOR'}
}
&.md-accent {
.md-spinner-path {
stroke: #{'ACCENT-COLOR'}
}
}
&.md-warn {
.md-spinner-path {
stroke: #{'WARN-COLOR'}
}
}
}
}

68
src/components/mdSpinner/mdSpinner.vue Normal file
View file

@ -0,0 +1,68 @@
<template>
<transition name="md-spinner" appear>
<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-width="mdStroke" :stroke-dasharray="dashProgress">
</svg>
</div>
</transition>
</template>
<style lang="scss" src="./mdSpinner.scss"></style>
<script>
import theme from '../../core/components/mdTheme/mixin';
export default {
props: {
mdSize: {
type: Number,
default: 50
},
mdStroke: {
type: Number,
default: 3.5
},
mdIndeterminate: Boolean,
mdProgress: {
type: Number,
default: 0
}
},
mixins: [theme],
computed: {
classes() {
return {
'md-indeterminate': this.mdIndeterminate
};
},
styles() {
const newSize = this.mdSize + 'px';
return {
width: newSize,
height: newSize
};
},
dashProgress() {
let progress = this.mdProgress * 125 / 100;
if (this.mdIndeterminate) {
return false;
}
if (progress >= 125) {
progress = 130;
}
return `${progress}, 200`;
}
},
data: () => ({
}),
methods: {
}
};
</script>

2
src/components/mdSubheader/mdSubheader.theme
View file

@ -1,7 +1,5 @@
.THEME_NAME {
.md-subheader,
&.md-subheader {
&.md-primary {
color: #{'PRIMARY-COLOR'};
}

25
src/components/mdSubheader/mdSubheader.vue
View file

@ -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
src/components/mdSwitch/mdSwitch.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-switch,
&.md-switch {
&.md-checked {
.md-switch-container {

6
src/components/mdSwitch/mdSwitch.vue
View file

@ -1,5 +1,4 @@
<template>
<div class="md-switch" :class="classes">
<div class="md-switch" :class="[themeClass, classes]">
<div class="md-switch-container" @click="toggle($event)">
<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 +15,8 @@
<style lang="scss" src="./mdSwitch.scss"></style>
<script>
import theme from '../../core/components/mdTheme/mixin';
const checkedPosition = 75;
const initialPosition = '-1px';
@ -30,6 +31,7 @@
default: 'button'
}
},
mixins: [theme],
data() {
return {
leftPos: initialPosition,

3
src/components/mdTable/mdTable.theme
View file

@ -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'};

4
src/components/mdTable/mdTable.vue
View file

@ -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,

4
src/components/mdTable/mdTableAlternateHeader.vue
View file

@ -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: {},

10
src/components/mdTable/mdTableCard.vue
View file

@ -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>

4
src/components/mdTable/mdTablePagination.vue
View file

@ -6,7 +6,7 @@
<md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
</md-select>
<span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ totalItems }}</span>
<span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>
<md-button class="md-icon-button md-table-pagination-previous" @click="previousPage" :disabled="currentPage === 1">
<md-icon>keyboard_arrow_left</md-icon>
@ -48,7 +48,7 @@
subTotal: 0,
currentSize: parseInt(this.mdSize, 10),
currentPage: parseInt(this.mdPage, 10),
totalItems: !isNaN(this.mdTotal) && Number.MAX_SAFE_INTEGER
totalItems: isNaN(this.mdTotal) ? Number.MAX_SAFE_INTEGER : parseInt(this.mdTotal, 10)
};
},
computed: {

15
src/components/mdTabs/mdTab.vue
View file

@ -14,7 +14,12 @@
mdLabel: [String, Number],
mdIcon: String,
mdActive: Boolean,
mdDisabled: Boolean
mdDisabled: Boolean,
mdTooltip: String,
mdTooltipDirection: {
type: String,
default: 'bottom'
}
},
data() {
return {
@ -36,6 +41,12 @@
},
mdLabel() {
this.updateTabData();
},
mdTooltip() {
this.updateTabData();
},
mdTooltipDirection() {
this.updateTabData();
}
},
computed: {
@ -54,6 +65,8 @@
icon: this.mdIcon,
active: this.mdActive,
disabled: this.mdDisabled,
tooltip: this.mdTooltip,
tooltipDirection: this.mdTooltipDirection,
ref: this
};
},

111
src/components/mdTabs/mdTabs.theme
View file

@ -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'};
}
}
}
}

5
src/components/mdTabs/mdTabs.vue
View file

@ -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
src/components/mdToolbar/mdToolbar.theme
View file

@ -1,5 +1,4 @@
.THEME_NAME {
.md-toolbar,
&.md-toolbar {
background-color: #{'PRIMARY-COLOR'};
color: #{'PRIMARY-CONTRAST'};

10
src/components/mdToolbar/mdToolbar.vue
View file

@ -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>

73
src/core/components/mdTheme/index.js
View file

@ -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
View 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
View 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');
}
}
};

5
src/core/index.js
View file

@ -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);
}

4
src/core/stylesheets/base.scss
View file

@ -27,6 +27,10 @@ body {
@extend .md-body-1;
}
[tabindex='-1']:focus {
outline: none;
}
/* Fluid Media
========================================================================== */

2
src/core/stylesheets/core.theme
View file

@ -14,7 +14,7 @@
}
body.THEME_NAME {
background-color: #{'BACKGROUND-COLOR-50'};
background-color: #{'BACKGROUND-COLOR-A100'};
color: #{'BACKGROUND-CONTRAST-0.87'};
}

35
src/core/stylesheets/mixins.scss
View file

@ -1,3 +1,5 @@
/* Image aspect ratio calculator */
@mixin image-aspect-ratio($width, $height) {
overflow: hidden;
@ -16,3 +18,36 @@
transform: translateY(-50%);
}
}
/* Responsive breakpoints */
@mixin layout-xsmall {
@media (max-width: #{$breakpoint-xsmall}) {
@content;
}
}
@mixin layout-small {
@media (max-width: #{$breakpoint-small - 16px}) {
@content;
}
}
@mixin layout-medium {
@media (max-width: #{$breakpoint-medium - 16px}) {
@content;
}
}
@mixin layout-large {
@media (max-width: #{$breakpoint-large - 17px}) {
@content;
}
}
@mixin layout-xlarge {
@media (min-width: #{$breakpoint-large - 16px}) {
@content;
}
}

21
src/core/stylesheets/variables.scss
View file

@ -1,12 +1,17 @@
/* Common
========================================================================== */
/* Common */
$font-roboto: Roboto, Lato, sans-serif;
$font-roboto: Roboto, 'Noto Sans', Noto, sans-serif;
/* Responsive Breakpoints */
/* Transitions - Based on Angular Material
========================================================================== */
$breakpoint-xsmall: 600px !default;
$breakpoint-small: 960px !default;
$breakpoint-medium: 1280px !default;
$breakpoint-large: 1920px !default;
/* Transitions - Based on Angular Material */
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
@ -20,7 +25,7 @@ $swift-ease-in-out-duration: .5s !default;
$swift-ease-in-out-timing-function: cubic-bezier(.35, 0, .25, 1) !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
$swift-linear-duration: .08s !default;
$swift-linear-duration: .15s !default;
$swift-linear-timing-function: linear !default;
$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
@ -33,9 +38,7 @@ $material-leave-timing-function: cubic-bezier(.4, .0, 1, 1);
$material-leave: all $material-leave-duration $material-leave-timing-function;
/* Elevation - Based on Angular Material
========================================================================== */
/* Elevation - Based on Angular Material */
$shadow-key-umbra-opacity: .2 !default;
$shadow-key-penumbra-opacity: .14 !default;

4
src/index.js
View file

@ -10,11 +10,13 @@ import MdDialog from './components/mdDialog';
import MdDivider from './components/mdDivider';
import MdIcon from './components/mdIcon';
import MdInputContainer from './components/mdInputContainer';
import MdLayout from './components/mdLayout';
import MdList from './components/mdList';
import MdMenu from './components/mdMenu';
import MdRadio from './components/mdRadio';
import MdSelect from './components/mdSelect';
import MdSidenav from './components/mdSidenav';
import MdSpinner from './components/mdSpinner';
import MdSubheader from './components/mdSubheader';
import MdSwitch from './components/mdSwitch';
import MdTable from './components/mdTable';
@ -36,11 +38,13 @@ const options = {
MdDivider,
MdIcon,
MdInputContainer,
MdLayout,
MdList,
MdMenu,
MdRadio,
MdSelect,
MdSidenav,
MdSpinner,
MdSubheader,
MdSwitch,
MdTable,