Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-01 20:14:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Start migration to Vue 2.0

Browse source
This commit is contained in:
Marcos Moura 2016-08-30 12:41:16 -03:00
parent ed4523524b
commit 7c990b0e6e
46 changed files with 1222 additions and 959 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package.json
View file

@ -17,20 +17,19 @@
"dependencies": {
"autosize": "^3.0.17",
"highlight.js": "^9.6.0",
"scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
"vue-touch": "^1.1.0"
"scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.11.6",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.23.1",
"eslint": "^3.2.2",
"eslint": "^3.3.1",
"eslint-friendly-formatter": "^2.0.6",
"eslint-loader": "^1.5.0",
"eslint-plugin-html": "^1.5.2",
@ -48,14 +47,13 @@
"sass-loader": "^4.0.0",
"shelljs": "^0.7.3",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"vue": "^2.0.0-rc.4",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.3",
"vue-router": "^0.7.13",
"vue-loader": "^9.4.0",
"vue-router": "^2.0.0-rc.4",
"vue-style-loader": "^1.0.0",
"vue-validator": "^2.1.5",
"webpack": "^1.13.1",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"

10
src/components/mdInkRipple/index.js
View file

@ -116,12 +116,12 @@ export default function install(Vue) {
});
};
Vue.directive('mdInkRipple', function(disabled) {
this.vm.$nextTick(() => {
if (!disabled) {
createRipple(this.el);
Vue.directive('mdInkRipple', function(el, bindings) {
Vue.nextTick(() => {
if (!bindings.value) {
createRipple(el);
} else {
unregisterMouseEvent(this.el);
unregisterMouseEvent(el);
}
});
});

2
src/components/mdInkRipple/mdInkRipple.scss
View file

@ -8,7 +8,7 @@
right: 0;
bottom: 0;
left: 0;
mask-image: radial-gradient(circle, white 100%, black 100%);
-webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
transition: $swift-ease-in;
}

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

@ -1,10 +1,6 @@
<template>
<li class="md-list-item">
<md-link-button :title="title" :target="target" :href="href" v-link="vLink" class="md-list-item-container" v-if="href || vLink">
<slot></slot>
</md-link-button>
<md-button :title="title" class="md-list-item-container" v-else>
<md-button :title="title" :target="target" :href="href" class="md-list-item-container">
<slot></slot>
</md-button>
</li>

25
src/components/mdSidenav/mdSidenav.scss
View file

@ -25,13 +25,8 @@
bottom: 0;
z-index: 100;
pointer-events: none;
overflow: auto;
transition: $swift-ease-out;
&.md-active {
pointer-events: auto;
box-shadow: $material-shadow-16dp;
transform: translate3d(0, 0, 0);
}
}
.md-backdrop {
@ -46,10 +41,18 @@
transform: translate3d(0, 0, 0);
opacity: 0;
transition: $swift-ease-in-out;
&.md-active {
opacity: 1;
pointer-events: auto;
}
}
}
.md-sidenav.md-active {
.md-sidenav-content {
pointer-events: auto;
box-shadow: $material-shadow-16dp;
transform: translate3d(0, 0, 0);
}
.md-backdrop {
opacity: 1;
pointer-events: auto;
}
}

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

@ -1,10 +1,10 @@
<template>
<div class="md-sidenav" @keyup.esc="hide" tabindex="0">
<div class="md-sidenav-content" :class="classes">
<div class="md-sidenav" :class="classes" @keyup.esc="hide" tabindex="0">
<div class="md-sidenav-content">
<slot></slot>
</div>
<div class="md-backdrop" :class="classes" @click="hide"></div>
<div class="md-backdrop" @click="hide"></div>
</div>
</template>

7
src/components/mdSwitch/index.js
View file

@ -1,14 +1,7 @@
import 'hammerjs/hammer.min.js';
import VueTouch from 'vue-touch';
import mdSwitch from './mdSwitch.vue';
import mdSwitchTheme from './mdSwitch.theme';
export default function install(Vue) {
Vue.use(VueTouch);
VueTouch.config.pan = {
threshold: 1
};
Vue.component('md-switch', Vue.extend(mdSwitch));
window.VueMaterial.styles.push(mdSwitchTheme);

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

@ -1,7 +1,8 @@
<template>
<div class="md-switch" :class="classes">
<div class="md-switch-container" @click="onClick">
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled" v-touch:panstart="onDragStart" v-touch:panmove="onDrag" v-touch:panend="onDragEnd" v-touch-options:pan="{ direction: 'horizontal' }">
<!-- <div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled" v-touch:panstart="onDragStart" v-touch:panmove="onDrag" v-touch:panend="onDragEnd" v-touch-options:pan="{ direction: 'horizontal' }"> -->
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
<input type="checkbox" v-model="model" :name="name" :id="id" :disabled="disabled" :value="value">
</div>
</div>

10
src/components/mdTheme/index.js
View file

@ -8,7 +8,7 @@ const DEFAULT_THEME_COLORS = {
background: 'grey',
warn: 'deep-orange'
};
const DEFAULT_HUES = {
/*const DEFAULT_HUES = {
accent: {
'hue-1': 'A100',
'hue-2': 'A400',
@ -19,7 +19,7 @@ const DEFAULT_HUES = {
'hue-2': '100',
'hue-3': '300'
}
};
};*/
const createNewStyleElement = (style, name) => {
let head = document.head;
@ -112,9 +112,11 @@ export default function install(Vue, themes) {
document.body.classList.add('md-theme-default');
Vue.directive('mdTheme', function(theme) {
Vue.directive('mdTheme', function(el, bindings) {
let theme = bindings.value;
if (theme && registedThemes.indexOf(theme) >= 0) {
this.el.classList.add('md-theme-' + theme);
el.classList.add('md-theme-' + theme);
} else {
console.warn('Attempted to use unregistered theme "' + theme + '\".');
}

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

@ -4,5 +4,6 @@ body.THEME_NAME {
:not(input):not(textarea)::selection {
background: #{'ACCENT-COLOR'};
color: #{'ACCENT-CONTRAST'};
}
}

143
src/docs-temp/App.vue Normal file
View file

@ -0,0 +1,143 @@
<template>
<div class="container">
<md-sidenav class="main-sidebar md-left md-fixed" :md-visible.sync="showSidenav">
<md-toolbar class="md-extended">
<div class="md-toolbar-container">
<h1 class="md-title vue-material-logo">Vue Material</h1>
</div>
</md-toolbar>
<md-list>
<!-- <md-list-item v-link="avatar">Avatar</md-list-item>
<md-list-item v-link="bottom-bar">Bottom Bar</md-list-item>
<md-list-item v-link="button">Button</md-list-item>
<md-list-item v-link="button-toggle">Button Toggle</md-list-item>
<md-list-item v-link="checkbox">Checkbox</md-list-item>
<md-list-item v-link="divider">Divider</md-list-item>
<md-list-item v-link="icon">Icon</md-list-item>
<md-list-item v-link="input">Input</md-list-item>
<md-list-item v-link="list">List</md-list-item>
<md-list-item v-link="radio">Radio</md-list-item>
<md-list-item v-link="ripple">Ripple</md-list-item>
<md-list-item v-link="select">Select</md-list-item>
<md-list-item v-link="sidenav">Sidenav</md-list-item>
<md-list-item v-link="subheader">Subheader</md-list-item>
<md-list-item :v-link="'switch'">Switch</md-list-item>
<md-list-item v-link="theme">Theme</md-list-item>
<md-list-item v-link="toolbar">Toolbar</md-list-item>
<md-list-item v-link="tooltip">Tooltip</md-list-item>
<md-list-item v-link="whiteframe">Whiteframe</md-list-item> -->
</md-list>
</md-sidenav>
<div class="main-content">
<md-whiteframe md-elevation="3dp" class="main-header">
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<span class="vue-material-logo">Vue Material</span>
<h2 class="md-title">{{ pageTitle }}</h2>
</md-toolbar>
</md-whiteframe>
<router-view></router-view>
</div>
</div>
</template>
<style lang="scss">
@import '../core/stylesheets/variables.scss';
$sizebar-size: 280px;
.container {
min-height: 100%;
display: flex;
flex-flow: column nowrap;
flex: 1;
}
.main-header {
position: relative;
z-index: 3;
.md-button:first-child {
@media (min-width: 1280px) {
display: none;
}
}
.vue-material-logo {
margin-right: 16px;
padding-right: 16px;
border-right: 1px solid rgba(#fff, .6);
font-size: 20px;
font-weight: 500;
line-height: 26px;
@media (min-width: 1280px) {
margin-left: 8px;
}
}
}
.main-sidebar.md-sidenav {
.md-sidenav-content {
@media (min-width: 1280px) {
width: $sizebar-size;
display: flex;
flex-flow: column;
top: 0;
z-index: 2;
pointer-events: auto;
transform: translate3d(0, 0, 0);
box-shadow: $material-shadow-3dp;
}
}
.md-list {
overflow: auto;
flex: 1;
}
}
.main-content {
display: flex;
flex-flow: column;
flex: 1;
position: relative;
z-index: 1;
transition: $swift-ease-out;
@media (min-width: 1280px) {
padding-left: $sizebar-size;
}
}
</style>
<script>
export default {
data() {
return {
showSidenav: false,
pageTitle: ''
};
},
methods: {
toggleSidenav() {
this.showSidenav = !this.showSidenav;
},
hideSidenav() {
this.showSidenav = false;
}
},
ready() {
this.$on('pageTitle', (title) => {
this.pageTitle = title;
});
}
};
</script>

40
src/docs-temp/config.js Normal file
View file

@ -0,0 +1,40 @@
import Vue from 'vue';
import VueMaterial from '../vue-material';
VueMaterial.enableAll(Vue);
Vue.use(VueMaterial.MdTheme, {
default: {
primary: {
color: 'blue',
hue: '600'
},
accent: {
color: 'red',
hue: 'A200'
}
},
indigo: {
primary: 'indigo',
accent: 'blue'
},
orange: {
primary: 'orange',
accent: 'green'
},
blue: {
primary: 'blue',
accent: 'purple'
},
'light-blue': {
primary: 'light-blue',
accent: {
color: 'cyan',
hue: 'A200'
}
},
teal: {
primary: 'teal',
accent: 'orange'
}
});

0
src/docs/core/components/code-example.vue → src/docs-temp/core/components/code-example.vue
View file

0
src/docs/core/components/code-section.vue → src/docs-temp/core/components/code-section.vue
View file

0
src/docs/core/components/page-container.vue → src/docs-temp/core/components/page-container.vue
View file

0
src/docs/core/index.js → src/docs-temp/core/index.js
View file

28
src/docs-temp/index.js Normal file
View file

@ -0,0 +1,28 @@
/* Third Party */
import Vue from 'vue';
import VueRouter from 'vue-router';
/* Configs */
import './config.js';
import './core';
import routes from './routes.js';
import App from './App.vue';
Vue.use(VueRouter);
let router = new VueRouter({
hashbang: false,
routes
});
var app = new Vue({
el: '#app',
...App,
router
});
router.afterEach(() => {
app.hideSidenav();
document.querySelector('.main-content').scrollTop = 0;
});

0
src/docs/pages/Avatar.vue → src/docs-temp/pages/Avatar.vue
View file

0
src/docs/pages/BottomBar.vue → src/docs-temp/pages/BottomBar.vue
View file

0
src/docs/pages/ButtonToggle.vue → src/docs-temp/pages/ButtonToggle.vue
View file

0
src/docs/pages/Buttons.vue → src/docs-temp/pages/Buttons.vue
View file

0
src/docs/pages/Checkbox.vue → src/docs-temp/pages/Checkbox.vue
View file

0
src/docs/pages/Divider.vue → src/docs-temp/pages/Divider.vue
View file

5
src/docs-temp/pages/Home.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<section>
<h1>Home</h1>
</section>
</template>

0
src/docs/pages/Icon.vue → src/docs-temp/pages/Icon.vue
View file

80
src/docs-temp/pages/Input.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<section>
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Initial value</label>
<md-input value="My initial value"></md-input>
</md-input-container>
<md-input-container>
<label>With label</label>
<md-input placeholder="My nice placeholder"></md-input>
</md-input-container>
<md-input-container md-inline>
<label>Inline field</label>
<md-input></md-input>
</md-input-container>
<md-input-container>
<label>Required</label>
<md-input required></md-input>
<span class="md-error">Validation message</span>
</md-input-container>
<md-input-container>
<label>Disabled</label>
<md-input disabled></md-input>
</md-input-container>
<md-input-container md-has-password>
<label>Passwords</label>
<md-input type="password"></md-input>
</md-input-container>
<md-input-container>
<label>Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
<md-input-container>
<label>Character counter - Textarea</label>
<md-textarea maxlength="70"></md-textarea>
<span class="md-error">Max length reached</span>
</md-input-container>
<md-input-container>
<label>Character counter - Input</label>
<md-input maxlength="20"></md-input>
<span class="md-error">Max length reached</span>
</md-input-container>
<md-input-container v-md-theme="'blue'">
<label>Themable - Input</label>
<md-input></md-input>
</md-input-container>
<md-input-container v-md-theme="'orange'">
<label>Themable - Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
</form>
</section>
</template>
<style lang="scss" scoped>
section {
margin: 24px;
}
</style>
<script>
export default {
methods: {
}
};
</script>

649
src/docs-temp/pages/List.vue Normal file
View file

@ -0,0 +1,649 @@
<template>
<section>
<h1 class="md-title">Lists</h1>
<div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Single Line</h2>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
</md-list-item>
<md-list-item>
<md-icon>send</md-icon> <span>Outbox</span>
</md-list-item>
<md-list-item>
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
<md-list-item>
<md-icon>error</md-icon> <span>Spam</span>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<span>Abbey Christansen</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<span>Alex Nelson</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<span>Mary Johnson</span>
<md-button class="md-icon-button md-list-action">
<md-icon>chat_bubble</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Single Line</h2>
</md-toolbar>
<md-list class="md-dense">
<md-list-item>
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
</md-list-item>
<md-list-item>
<md-icon>send</md-icon> <span>Outbox</span>
</md-list-item>
<md-list-item>
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
<md-list-item>
<md-icon>error</md-icon> <span>Spam</span>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<span>Abbey Christansen</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<span>Alex Nelson</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<span>Mary Johnson</span>
<md-button class="md-icon-button md-list-action">
<md-icon>chat_bubble</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
<div v-md-theme="'indigo'">
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Double Line</h2>
</md-toolbar>
<md-list class="md-double-line">
<md-list-item>
<md-icon class="md-primary">phone</md-icon>
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-icon class="md-primary">email</md-icon>
<div class="md-list-text-container">
<span>aliconnors@example.com</span>
<span>Personal</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>ali_connors@example.com</span>
<span>Work</span>
</div>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Double Line</h2>
</md-toolbar>
<md-list class="md-double-line md-dense">
<md-list-item>
<md-icon class="md-primary">phone</md-icon>
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-icon class="md-primary">email</md-icon>
<div class="md-list-text-container">
<span>aliconnors@example.com</span>
<span>Personal</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>ali_connors@example.com</span>
<span>Work</span>
</div>
</md-list-item>
</md-list>
</div>
</div>
<div v-md-theme="'orange'">
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Triple Line</h2>
</md-toolbar>
<md-list class="custom-list md-triple-line">
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Ali Connors</span>
<span>Brunch this weekend?</span>
<p>I'll be in your neighborhood doing errands...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">star</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>me, Scott, Jennifer</span>
<span>Summer BBQ</span>
<p>Wish I could come, but I'm out of town ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Sandra Adams</span>
<span>Oui oui</span>
<p>Do you have Paris recommendations ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/8" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Trevor Hansen</span>
<span>Order confirmation</span>
<p>Thank you for your recent order from ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Triple Line</h2>
</md-toolbar>
<md-list class="custom-list md-triple-line md-dense">
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Ali Connors</span>
<span>Brunch this weekend?</span>
<p>I'll be in your neighborhood doing errands...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">star</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>me, Scott, Jennifer</span>
<span>Summer BBQ</span>
<p>Wish I could come, but I'm out of town ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Sandra Adams</span>
<span>Oui oui</span>
<p>Do you have Paris recommendations ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/8" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Trevor Hansen</span>
<span>Order confirmation</span>
<p>Thank you for your recent order from ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
</md-list>
</div>
</div>
<div>
<div class="cell-phone complete-example">
<md-whiteframe md-elevation="3">
<md-toolbar class="md-extended" v-md-theme="'light-blue'">
<div class="md-toolbar-container">
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<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>view_module</md-icon>
</md-button>
</div>
<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-whiteframe>
<md-list class="md-double-line">
<md-subheader class="md-inset">Folders</md-subheader>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Photos</span>
<p>Jan 9, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Recipes</span>
<p>Jan 17, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Work</span>
<p>Jan 28, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-subheader class="md-inset">Files</md-subheader>
<md-list-item>
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
<md-icon>insert_drive_file</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Vacation Itinerary</span>
<p>Jan 20, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
<md-icon>collections</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Kitchen Remodel</span>
<p>Jan 10, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon md-primary">
<md-icon>view_list</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Grocery Shop</span>
<p>Jan 10, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
</md-list>
<md-sidenav v-md-theme="'blue'" class="md-left" :md-visible.sync="sidenavVisible">
<md-toolbar class="md-account-header">
<md-list class="md-transparent">
<md-list-item class="md-avatar-list">
<md-avatar class="md-large">
<img src="https://placeimg.com/64/64/people/8" alt="People">
</md-avatar>
<span style="flex: 1"></span>
<md-avatar>
<img src="https://placeimg.com/40/40/people/3" alt="People">
</md-avatar>
<md-avatar>
<img src="https://placeimg.com/40/40/people/4" alt="People">
</md-avatar>
</md-list-item>
<md-list-item>
<div class="md-list-text-container">
<span>John Doe</span>
<span>johndoe@email.com</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>arrow_drop_down</md-icon>
</md-button>
</md-list-item>
</md-list>
</md-toolbar>
<md-list>
<md-list-item class="md-primary" @click="toggleSidenav">
<md-icon>insert_drive_file</md-icon> <span>My files</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>people</md-icon> <span>Shared with me</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>access_time</md-icon> <span>Recent</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>start</md-icon> <span>Starred</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
</md-list>
</md-sidenav>
</div>
</div>
</section>
</template>
<style lang="scss">
@import '../../core/stylesheets/variables.scss';
.custom-list {
.md-list-action {
position: absolute;
top: 8px;
right: 16px;
pointer-events: auto;
z-index: 2;
}
.md-icon {
color: rgba(#000, .26);
}
}
.complete-example {
height: auto;
position: relative;
z-index: 1;
.md-fab {
margin: 0;
position: absolute;
bottom: -20px;
left: 16px;
box-shadow: $material-shadow-5dp;
}
.md-toolbar {
.md-icon {
color: #014e70;
}
}
.md-title {
color: #fff;
}
.md-list-action .md-icon {
color: rgba(#000, .26);
}
.md-avatar-icon .md-icon {
color: #fff !important;
}
.md-sidenav .md-list-text-container > :nth-child(2) {
color: rgba(#fff, .54);
}
}
</style>
<script>
export default {
data() {
return {
sidenavVisible: false
};
},
methods: {
toggleSidenav() {
this.sidenavVisible = !this.sidenavVisible;
}
}
};
</script>

0
src/docs/pages/Radio.vue → src/docs-temp/pages/Radio.vue
View file

0
src/docs/pages/Ripple.vue → src/docs-temp/pages/Ripple.vue
View file

0
src/docs/pages/Select.vue → src/docs-temp/pages/Select.vue
View file

0
src/docs/pages/Sidenav.vue → src/docs-temp/pages/Sidenav.vue
View file

0
src/docs/pages/Subheader.vue → src/docs-temp/pages/Subheader.vue
View file

0
src/docs/pages/Switch.vue → src/docs-temp/pages/Switch.vue
View file

0
src/docs/pages/Theme.vue → src/docs-temp/pages/Theme.vue
View file

0
src/docs/pages/Toolbar.vue → src/docs-temp/pages/Toolbar.vue
View file

0
src/docs/pages/Tooltip.vue → src/docs-temp/pages/Tooltip.vue
View file

0
src/docs/pages/Whiteframe.vue → src/docs-temp/pages/Whiteframe.vue
View file

125
src/docs-temp/routes.js Normal file
View file

@ -0,0 +1,125 @@
import Home from './pages/Home';
import Avatar from './pages/Avatar';
import BottomBar from './pages/BottomBar';
import Buttons from './pages/Buttons';
import ButtonToggle from './pages/ButtonToggle';
import Checkbox from './pages/Checkbox';
import Divider from './pages/Divider';
import Icon from './pages/Icon';
import Input from './pages/Input';
import List from './pages/List';
import Radio from './pages/Radio';
import Ripple from './pages/Ripple';
import Select from './pages/Select';
import Sidenav from './pages/Sidenav';
import Subheader from './pages/Subheader';
import Switch from './pages/Switch';
import Theme from './pages/Theme';
import Toolbar from './pages/Toolbar';
import Tooltip from './pages/Tooltip';
import Whiteframe from './pages/Whiteframe';
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/avatar',
name: 'avatar',
component: Avatar
},
{
path: '/bottom-bar',
name: 'bottomBar',
component: BottomBar
},
{
path: '/button',
name: 'button',
component: Buttons
},
{
path: '/button-toggle',
name: 'buttonToggle',
component: ButtonToggle
},
{
path: '/radio',
name: 'radio',
component: Radio
},
{
path: '/switch',
name: 'switch',
component: Switch
},
{
path: '/checkbox',
name: 'checkbox',
component: Checkbox
},
{
path: '/divider',
name: 'divider',
component: Divider
},
{
path: '/icon',
name: 'icon',
component: Icon
},
{
path: '/input',
name: 'input',
component: Input
},
{
path: '/list',
name: 'list',
component: List
},
{
path: '/ripple',
name: 'ripple',
component: Ripple
},
{
path: '/sidenav',
name: 'sidenav',
component: Sidenav
},
{
path: '/select',
name: 'select',
component: Select
},
{
path: '/subheader',
name: 'subheader',
component: Subheader
},
{
path: '/theme',
name: 'theme',
component: Theme
},
{
path: '/toolbar',
name: 'toolbar',
component: Toolbar
},
{
path: '/tooltip',
name: 'tooltip',
component: Tooltip
},
{
path: '/whiteframe',
name: 'whiteframe',
component: Whiteframe
}
];
export default routes;

0
src/docs/stylesheets/docs.scss → src/docs-temp/stylesheets/docs.scss
View file

133
src/docs/App.vue
View file

@ -1,49 +1,49 @@
<template>
<div class="container">
<md-sidenav class="main-sidebar md-left md-fixed" :md-visible.sync="showSidenav">
<md-toolbar class="md-extended">
<div class="md-toolbar-container">
<h1 class="md-title vue-material-logo">Vue Material</h1>
</div>
<md-sidenav class="main-sidebar md-left md-fixed">
<md-toolbar v-md-theme="'white'">
<span class="md-title">Vue Material</span>
</md-toolbar>
<md-list>
<md-list-item v-link="avatar">Avatar</md-list-item>
<md-list-item v-link="bottom-bar">Bottom Bar</md-list-item>
<md-list-item v-link="button">Button</md-list-item>
<md-list-item v-link="button-toggle">Button Toggle</md-list-item>
<md-list-item v-link="checkbox">Checkbox</md-list-item>
<md-list-item v-link="divider">Divider</md-list-item>
<md-list-item v-link="icon">Icon</md-list-item>
<md-list-item v-link="input">Input</md-list-item>
<md-list-item v-link="list">List</md-list-item>
<md-list-item v-link="radio">Radio</md-list-item>
<md-list-item v-link="ripple">Ripple</md-list-item>
<md-list-item v-link="select">Select</md-list-item>
<md-list-item v-link="sidenav">Sidenav</md-list-item>
<md-list-item v-link="subheader">Subheader</md-list-item>
<md-list-item :v-link="'switch'">Switch</md-list-item>
<md-list-item v-link="theme">Theme</md-list-item>
<md-list-item v-link="toolbar">Toolbar</md-list-item>
<md-list-item v-link="tooltip">Tooltip</md-list-item>
<md-list-item v-link="whiteframe">Whiteframe</md-list-item>
<md-list-item>Avatar</md-list-item>
<md-list-item>Bottom Bar</md-list-item>
<md-list-item>Button</md-list-item>
<md-list-item>Button Toggle</md-list-item>
<md-list-item>Checkbox</md-list-item>
<md-list-item>Divider</md-list-item>
<md-list-item>Icon</md-list-item>
<md-list-item>Input</md-list-item>
<md-list-item>List</md-list-item>
<md-list-item>Radio</md-list-item>
<md-list-item>Ripple</md-list-item>
<md-list-item>Select</md-list-item>
<md-list-item>Sidenav</md-list-item>
<md-list-item>Subheader</md-list-item>
<md-list-item>Switch</md-list-item>
<md-list-item>Theme</md-list-item>
<md-list-item>Toolbar</md-list-item>
<md-list-item>Tooltip</md-list-item>
<md-list-item>Whiteframe</md-list-item>
</md-list>
</md-sidenav>
<div class="main-content">
<md-whiteframe md-elevation="3dp" class="main-header">
<div class="page-content">
<md-whiteframe class="main-header" md-elevation="3">
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<span class="vue-material-logo">Vue Material</span>
<h2 class="md-title">{{ pageTitle }}</h2>
<div class="md-title">
<span class="logo-vue-material">Vue Material – </span><span class="page-title">Home</span>
</div>
</md-toolbar>
</md-whiteframe>
<router-view></router-view>
<div class="main-content">
<router-view></router-view>
</div>
</div>
</div>
</template>
@ -53,6 +53,15 @@
$sizebar-size: 280px;
html,
body {
height: 100%;
}
body {
display: flex;
}
.container {
min-height: 100%;
display: flex;
@ -60,6 +69,10 @@
flex: 1;
}
.md-theme-default .md-toolbar:not(.md-theme-white) {
color: #fff;
}
.main-header {
position: relative;
z-index: 3;
@ -70,16 +83,23 @@
}
}
.vue-material-logo {
margin-right: 16px;
padding-right: 16px;
border-right: 1px solid rgba(#fff, .6);
font-size: 20px;
font-weight: 500;
line-height: 26px;
.md-title {
font-size: 18px;
@media (min-width: 1280px) {
margin-left: 8px;
.logo-vue-material {
display: inline-block;
@media (min-width: 1280px) {
display: none;
}
}
.page-title {
margin-left: 0;
@media (min-width: 1280px) {
margin-left: 8px;
}
}
}
}
@ -98,13 +118,17 @@
}
}
.md-toolbar {
border-bottom: 1px solid rgba(#000, .12);
}
.md-list {
overflow: auto;
flex: 1;
}
}
.main-content {
.page-content {
display: flex;
flex-flow: column;
flex: 1;
@ -116,29 +140,16 @@
padding-left: $sizebar-size;
}
}
.main-content {
padding: 16px;
flex: 1;
overflow: auto;
}
</style>
<script>
export default {
name: 'app',
data() {
return {
showSidenav: false,
pageTitle: ''
};
},
methods: {
toggleSidenav() {
this.showSidenav = !this.showSidenav;
},
hideSidenav() {
this.showSidenav = false;
}
},
ready() {
this.$on('pageTitle', (title) => {
this.pageTitle = title;
});
}
};
</script>

16
src/docs/config.js
View file

@ -5,14 +5,12 @@ VueMaterial.enableAll(Vue);
Vue.use(VueMaterial.MdTheme, {
default: {
primary: {
color: 'blue',
hue: '600'
},
accent: {
color: 'red',
hue: 'A200'
}
primary: 'cyan',
accent: 'indigo'
},
white: {
primary: 'white',
accent: 'indigo'
},
indigo: {
primary: 'indigo',
@ -33,7 +31,7 @@ Vue.use(VueMaterial.MdTheme, {
hue: 'A200'
}
},
'teal': {
teal: {
primary: 'teal',
accent: 'orange'
}

35
src/docs/index.js
View file

@ -1,30 +1,27 @@
/* Third Party */
import Vue from 'vue';
import VueValidator from 'vue-validator';
import VueRouter from 'vue-router';
Vue.use(VueValidator);
/* Configs */
import './config.js';
import routes from './routes.js';
import App from './App';
Vue.use(VueRouter);
/* Configs */
import './stylesheets/docs.scss';
import './config.js';
import './core';
import routes from './routes.js';
import app from './App.vue';
let App = Vue.component('app', app);
let router = new VueRouter({
hashbang: false
hashbang: false,
routes
});
router.afterEach(function() {
router.app.hideSidenav();
let Docs = Vue.component('app', App);
Docs = new Docs({
el: '#app',
router
});
router.afterEach(() => {
document.querySelector('.main-content').scrollTop = 0;
});
router.map(routes);
router.start(App, '#app');

5
src/docs/pages/Error.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<section>
<h1>Error 404</h1>
</section>
</template>

86
src/docs/pages/Input.vue
View file

@ -1,86 +0,0 @@
<template>
<section>
<validator name="validation">
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Initial value</label>
<md-input value="My initial value"></md-input>
</md-input-container>
<md-input-container>
<label>With label</label>
<md-input placeholder="My nice placeholder"></md-input>
</md-input-container>
<md-input-container md-inline>
<label>Inline field</label>
<md-input></md-input>
</md-input-container>
<md-input-container>
<label>Required</label>
<md-input required v-validate:inline="['required']" initial="off"></md-input>
<span class="md-error">Validation message</span>
</md-input-container>
<md-input-container>
<label>Disabled</label>
<md-input disabled></md-input>
</md-input-container>
<md-input-container md-has-password>
<label>Passwords</label>
<md-input type="password"></md-input>
</md-input-container>
<md-input-container>
<label>Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
<md-input-container>
<label>Character counter - Textarea</label>
<md-textarea maxlength="70" v-validate:counterTextarea="{ maxlength: 70 }" initial="off"></md-textarea>
<span class="md-error">Max length reached</span>
</md-input-container>
<md-input-container>
<label>Character counter - Input</label>
<md-input maxlength="20" v-validate:counterInput="{ maxlength: 20 }" initial="off"></md-input>
<span class="md-error">Max length reached</span>
</md-input-container>
<md-input-container v-md-theme="'blue'">
<label>Themable - Input</label>
<md-input></md-input>
</md-input-container>
<md-input-container v-md-theme="'orange'">
<label>Themable - Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
<md-button type="submit" class="md-primary md-raised">Validate</md-button>
</form>
</validator>
</section>
</template>
<style lang="scss" scoped>
section {
margin: 24px;
}
</style>
<script>
export default {
methods: {
submit() {
this.$validate(true);
}
}
};
</script>

646
src/docs/pages/List.vue
View file

@ -1,649 +1,5 @@
<template>
<section>
<h1 class="md-title">Lists</h1>
<div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Single Line</h2>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
</md-list-item>
<md-list-item>
<md-icon>send</md-icon> <span>Outbox</span>
</md-list-item>
<md-list-item>
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
<md-list-item>
<md-icon>error</md-icon> <span>Spam</span>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<span>Abbey Christansen</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<span>Alex Nelson</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<span>Mary Johnson</span>
<md-button class="md-icon-button md-list-action">
<md-icon>chat_bubble</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Single Line</h2>
</md-toolbar>
<md-list class="md-dense">
<md-list-item>
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
</md-list-item>
<md-list-item>
<md-icon>send</md-icon> <span>Outbox</span>
</md-list-item>
<md-list-item>
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
<md-list-item>
<md-icon>error</md-icon> <span>Spam</span>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<span>Abbey Christansen</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<span>Alex Nelson</span>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">chat_bubble</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<span>Mary Johnson</span>
<md-button class="md-icon-button md-list-action">
<md-icon>chat_bubble</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
<div v-md-theme="'indigo'">
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Double Line</h2>
</md-toolbar>
<md-list class="md-double-line">
<md-list-item>
<md-icon class="md-primary">phone</md-icon>
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-icon class="md-primary">email</md-icon>
<div class="md-list-text-container">
<span>aliconnors@example.com</span>
<span>Personal</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>ali_connors@example.com</span>
<span>Work</span>
</div>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Double Line</h2>
</md-toolbar>
<md-list class="md-double-line md-dense">
<md-list-item>
<md-icon class="md-primary">phone</md-icon>
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>(650) 555-1234</span>
<span>Mobile</span>
</div>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-icon class="md-primary">email</md-icon>
<div class="md-list-text-container">
<span>aliconnors@example.com</span>
<span>Personal</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>sms</md-icon>
</md-button>
</md-list-item>
<md-list-item class="md-inset">
<div class="md-list-text-container">
<span>ali_connors@example.com</span>
<span>Work</span>
</div>
</md-list-item>
</md-list>
</div>
</div>
<div v-md-theme="'orange'">
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Normal - Triple Line</h2>
</md-toolbar>
<md-list class="custom-list md-triple-line">
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Ali Connors</span>
<span>Brunch this weekend?</span>
<p>I'll be in your neighborhood doing errands...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">star</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>me, Scott, Jennifer</span>
<span>Summer BBQ</span>
<p>Wish I could come, but I'm out of town ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Sandra Adams</span>
<span>Oui oui</span>
<p>Do you have Paris recommendations ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/8" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Trevor Hansen</span>
<span>Order confirmation</span>
<p>Thank you for your recent order from ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
</md-list>
</div>
<div class="cell-phone scrollable">
<md-toolbar>
<h2 class="md-title">Dense - Triple Line</h2>
</md-toolbar>
<md-list class="custom-list md-triple-line md-dense">
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Ali Connors</span>
<span>Brunch this weekend?</span>
<p>I'll be in your neighborhood doing errands...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon class="md-primary">star</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/6" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>me, Scott, Jennifer</span>
<span>Summer BBQ</span>
<p>Wish I could come, but I'm out of town ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Sandra Adams</span>
<span>Oui oui</span>
<p>Do you have Paris recommendations ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/8" alt="People">
</md-avatar>
<div class="md-list-text-container">
<span>Trevor Hansen</span>
<span>Order confirmation</span>
<p>Thank you for your recent order from ...</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>star_border</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
</md-list>
</div>
</div>
<div>
<div class="cell-phone complete-example">
<md-whiteframe md-elevation="3">
<md-toolbar class="md-extended" v-md-theme="'light-blue'">
<div class="md-toolbar-container">
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<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>view_module</md-icon>
</md-button>
</div>
<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-whiteframe>
<md-list class="md-double-line">
<md-subheader class="md-inset">Folders</md-subheader>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Photos</span>
<p>Jan 9, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Recipes</span>
<p>Jan 17, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon">
<md-icon>folder</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Work</span>
<p>Jan 28, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
<md-divider class="md-inset"></md-divider>
</md-list-item>
<md-subheader class="md-inset">Files</md-subheader>
<md-list-item>
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
<md-icon>insert_drive_file</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Vacation Itinerary</span>
<p>Jan 20, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
<md-icon>collections</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Kitchen Remodel</span>
<p>Jan 10, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar class="md-avatar-icon md-primary">
<md-icon>view_list</md-icon>
</md-avatar>
<div class="md-list-text-container">
<span>Grocery Shop</span>
<p>Jan 10, 2014</p>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>info</md-icon>
</md-button>
</md-list-item>
</md-list>
<md-sidenav v-md-theme="'blue'" class="md-left" :md-visible.sync="sidenavVisible">
<md-toolbar class="md-account-header">
<md-list class="md-transparent">
<md-list-item class="md-avatar-list">
<md-avatar class="md-large">
<img src="https://placeimg.com/64/64/people/8" alt="People">
</md-avatar>
<span style="flex: 1"></span>
<md-avatar>
<img src="https://placeimg.com/40/40/people/3" alt="People">
</md-avatar>
<md-avatar>
<img src="https://placeimg.com/40/40/people/4" alt="People">
</md-avatar>
</md-list-item>
<md-list-item>
<div class="md-list-text-container">
<span>John Doe</span>
<span>johndoe@email.com</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>arrow_drop_down</md-icon>
</md-button>
</md-list-item>
</md-list>
</md-toolbar>
<md-list>
<md-list-item class="md-primary" @click="toggleSidenav">
<md-icon>insert_drive_file</md-icon> <span>My files</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>people</md-icon> <span>Shared with me</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>access_time</md-icon> <span>Recent</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>start</md-icon> <span>Starred</span>
</md-list-item>
<md-list-item @click="toggleSidenav">
<md-icon>delete</md-icon> <span>Trash</span>
</md-list-item>
</md-list>
</md-sidenav>
</div>
</div>
<h1>List</h1>
</section>
</template>
<style lang="scss">
@import '../../core/stylesheets/variables.scss';
.custom-list {
.md-list-action {
position: absolute;
top: 8px;
right: 16px;
pointer-events: auto;
z-index: 2;
}
.md-icon {
color: rgba(#000, .26);
}
}
.complete-example {
height: auto;
position: relative;
z-index: 1;
.md-fab {
margin: 0;
position: absolute;
bottom: -20px;
left: 16px;
box-shadow: $material-shadow-5dp;
}
.md-toolbar {
.md-icon {
color: #014e70;
}
}
.md-title {
color: #fff;
}
.md-list-action .md-icon {
color: rgba(#000, .26);
}
.md-avatar-icon .md-icon {
color: #fff !important;
}
.md-sidenav .md-list-text-container > :nth-child(2) {
color: rgba(#fff, .54);
}
}
</style>
<script>
export default {
data() {
return {
sidenavVisible: false
};
},
methods: {
toggleSidenav() {
this.sidenavVisible = !this.sidenavVisible;
}
}
};
</script>

104
src/docs/routes.js
View file

@ -1,105 +1,23 @@
import Home from './pages/Home';
import Avatar from './pages/Avatar';
import BottomBar from './pages/BottomBar';
import Buttons from './pages/Buttons';
import ButtonToggle from './pages/ButtonToggle';
import Checkbox from './pages/Checkbox';
import Divider from './pages/Divider';
import Icon from './pages/Icon';
import Input from './pages/Input';
import List from './pages/List';
import Radio from './pages/Radio';
import Ripple from './pages/Ripple';
import Select from './pages/Select';
import Sidenav from './pages/Sidenav';
import Subheader from './pages/Subheader';
import Switch from './pages/Switch';
import Theme from './pages/Theme';
import Toolbar from './pages/Toolbar';
import Tooltip from './pages/Tooltip';
import Whiteframe from './pages/Whiteframe';
import Error404 from './pages/Error';
const routes = {
'/': {
const routes = [
{
path: '',
name: 'home',
component: Home
},
'/avatar': {
name: 'avatar',
component: Avatar
},
'/bottom-bar': {
name: 'bottomBar',
component: BottomBar
},
'/button': {
name: 'button',
component: Buttons
},
'/button-toggle': {
name: 'buttonToggle',
component: ButtonToggle
},
'/radio': {
name: 'radio',
component: Radio
},
'/switch': {
name: 'switch',
component: Switch
},
'/checkbox': {
name: 'checkbox',
component: Checkbox
},
'/divider': {
name: 'divider',
component: Divider
},
'/icon': {
name: 'icon',
component: Icon
},
'/input': {
name: 'input',
component: Input
},
'/list': {
{
path: '/list',
name: 'list',
component: List
},
'/ripple': {
name: 'ripple',
component: Ripple
},
'/sidenav': {
name: 'sidenav',
component: Sidenav
},
'/select': {
name: 'select',
component: Select
},
'/subheader': {
name: 'subheader',
component: Subheader
},
'/theme': {
name: 'theme',
component: Theme
},
'/toolbar': {
name: 'toolbar',
component: Toolbar
},
'/tooltip': {
name: 'tooltip',
component: Tooltip
},
'/whiteframe': {
name: 'whiteframe',
component: Whiteframe
{
path: '*',
name: 'error',
component: Error404
}
};
];
export default routes;