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

Improve lists and create whiteframes

Browse source
This commit is contained in:
Marcos Moura 2016-07-22 01:45:15 -03:00
parent f59acebbe8
commit fff91378a9
12 changed files with 253 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -20,13 +20,15 @@
<body>
<div class="container" id="app" v-cloak>
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<md-whiteframe md-elevation="3dp">
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title">Vue Material</h2>
</md-toolbar>
<h2 class="md-title">Vue Material</h2>
</md-toolbar>
</md-whiteframe>
<md-sidenav class="md-left md-fixed" :md-visible.sync="showSidenav">
<md-list>

15
src/components/mdList/mdList.scss
View file

@ -12,22 +12,31 @@
padding: 4px 0;
.md-list-item {
min-height: 40px;
padding: 4px 16px;
min-height: 48px;
.md-list-item-container {
padding: 4px 16px;
font-size: 13px;
}
}
.md-avatar {
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
}
}
}
.md-list-item {
min-height: 48px;
min-height: 56px;
display: flex;
position: relative;
.md-list-item-container {
width: 100%;
min-height: 0;
margin: 0;
padding: 8px 16px;
display: flex;

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

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

98
src/components/mdWhiteframe/mdWhiteframe.scss Normal file
View file

@ -0,0 +1,98 @@
@import '../../core/variables.scss';
.md-whiteframe-1dp {
box-shadow: $material-shadow-1dp;
}
.md-whiteframe-2dp {
box-shadow: $material-shadow-2dp;
}
.md-whiteframe-3dp {
box-shadow: $material-shadow-3dp;
}
.md-whiteframe-4dp {
box-shadow: $material-shadow-4dp;
}
.md-whiteframe-5dp {
box-shadow: $material-shadow-5dp;
}
.md-whiteframe-6dp {
box-shadow: $material-shadow-6dp;
}
.md-whiteframe-7dp {
box-shadow: $material-shadow-7dp;
}
.md-whiteframe-8dp {
box-shadow: $material-shadow-8dp;
}
.md-whiteframe-9dp {
box-shadow: $material-shadow-9dp;
}
.md-whiteframe-10dp {
box-shadow: $material-shadow-10dp;
}
.md-whiteframe-11dp {
box-shadow: $material-shadow-11dp;
}
.md-whiteframe-12dp {
box-shadow: $material-shadow-12dp;
}
.md-whiteframe-13dp {
box-shadow: $material-shadow-13dp;
}
.md-whiteframe-14dp {
box-shadow: $material-shadow-14dp;
}
.md-whiteframe-15dp {
box-shadow: $material-shadow-15dp;
}
.md-whiteframe-16dp {
box-shadow: $material-shadow-16dp;
}
.md-whiteframe-17dp {
box-shadow: $material-shadow-17dp;
}
.md-whiteframe-18dp {
box-shadow: $material-shadow-18dp;
}
.md-whiteframe-19dp {
box-shadow: $material-shadow-19dp;
}
.md-whiteframe-20dp {
box-shadow: $material-shadow-20dp;
}
.md-whiteframe-21dp {
box-shadow: $material-shadow-21dp;
}
.md-whiteframe-22dp {
box-shadow: $material-shadow-22dp;
}
.md-whiteframe-23dp {
box-shadow: $material-shadow-23dp;
}
.md-whiteframe-24dp {
box-shadow: $material-shadow-24dp;
}

29
src/components/mdWhiteframe/mdWhiteframe.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<div class="md-whiteframe" :class="classes">
<slot></slot>
</div>
</template>
<style lang="scss" src="./mdWhiteframe.scss"></style>
<script>
export default {
props: {
mdElevation: {
type: [String, Number],
required: true
}
},
computed: {
classes() {
let numberedElevation = parseInt(this.mdElevation, 10);
if (!isNaN(numberedElevation) && typeof numberedElevation === 'number') {
return `md-whiteframe-${ numberedElevation }dp`;
} else if (this.mdElevation.indexOf('dp') > -1) {
return `md-whiteframe-${ this.mdElevation }`;
}
}
}
};
</script>

8
src/core/variables.scss
View file

@ -37,9 +37,9 @@ $material-leave: all $material-leave-duration $material-leave-timing-function;
/* Elevation
========================================================================== */
$shadow-key-umbra-opacity: 0.2 !default;
$shadow-key-penumbra-opacity: 0.14 !default;
$shadow-ambient-shadow-opacity: 0.12 !default;
$shadow-key-umbra-opacity: .2 !default;
$shadow-key-penumbra-opacity: .14 !default;
$shadow-ambient-shadow-opacity: .12 !default;
$material-shadow-1dp: 0 1px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
@ -78,7 +78,7 @@ $material-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$material-shadow-10dp: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 10 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$material-shadow-11dp: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity),

5
src/docs/index.js
View file

@ -16,12 +16,15 @@ let App = Vue.component('app', {
methods: {
toggleSidenav() {
this.showSidenav = !this.showSidenav;
},
hideSidenav() {
this.showSidenav = false;
}
}
});
router.afterEach(function() {
router.app.toggleSidenav();
router.app.hideSidenav();
});
router.start(App, '#app');

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

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

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

@ -15,11 +15,51 @@
<md-list-item>
<md-icon>store</md-icon> <span>Store</span>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">
</md-avatar>
<span>Home</span>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/5" alt="People">
</md-avatar>
<span>Favorites</span>
<md-button class="md-icon-button md-list-action">
<md-icon>file_download</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/3" alt="People">
</md-avatar>
<span>Store</span>
</md-list-item>
</md-list>
</div>
<div class="cell-phone">
<md-list>
<md-list class="md-dense">
<md-list-item>
<md-icon>home</md-icon> <span>Home</span>
</md-list-item>
<md-list-item>
<md-icon>favorite</md-icon> <span>Favorites</span>
</md-list-item>
<md-list-item>
<md-icon>store</md-icon> <span>Store</span>
</md-list-item>
<md-list-item>
<md-avatar>
<img src="https://placeimg.com/40/40/people/1" alt="People">

35
src/docs/pages/Whiteframe.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<md-whiteframe md-elevation="1"></md-whiteframe>
<md-whiteframe md-elevation="2"></md-whiteframe>
<md-whiteframe md-elevation="3"></md-whiteframe>
<md-whiteframe md-elevation="4"></md-whiteframe>
<md-whiteframe md-elevation="5"></md-whiteframe>
<md-whiteframe md-elevation="6"></md-whiteframe>
<md-whiteframe md-elevation="7"></md-whiteframe>
<md-whiteframe md-elevation="8"></md-whiteframe>
<md-whiteframe md-elevation="9"></md-whiteframe>
<md-whiteframe md-elevation="10"></md-whiteframe>
<md-whiteframe md-elevation="11"></md-whiteframe>
<md-whiteframe md-elevation="12"></md-whiteframe>
<md-whiteframe md-elevation="13"></md-whiteframe>
<md-whiteframe md-elevation="14"></md-whiteframe>
<md-whiteframe md-elevation="15"></md-whiteframe>
<md-whiteframe md-elevation="16"></md-whiteframe>
<md-whiteframe md-elevation="17"></md-whiteframe>
<md-whiteframe md-elevation="18"></md-whiteframe>
<md-whiteframe md-elevation="19"></md-whiteframe>
<md-whiteframe md-elevation="20"></md-whiteframe>
<md-whiteframe md-elevation="21"></md-whiteframe>
<md-whiteframe md-elevation="22"></md-whiteframe>
<md-whiteframe md-elevation="23"></md-whiteframe>
<md-whiteframe md-elevation="24"></md-whiteframe>
</template>
<style lang="scss">
.page-content .md-whiteframe {
width: 100px;
height: 100px;
margin: 24px 12px 12px 24px;
display: inline-block;
}
</style>

10
src/docs/routes.js
View file

@ -3,6 +3,7 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
/* Pages */
import Home from './pages/Home';
import Avatar from './pages/Avatar';
import BottomBar from './pages/BottomBar';
import Buttons from './pages/Buttons';
@ -13,6 +14,7 @@ import List from './pages/List';
import Sidenav from './pages/Sidenav';
import Theme from './pages/Theme';
import Toolbar from './pages/Toolbar';
import Whiteframe from './pages/Whiteframe';
Vue.use(VueRouter);
@ -22,6 +24,10 @@ let router = new VueRouter({
});
router.map({
'/': {
name: 'home',
component: Home
},
'/avatar': {
name: 'avatar',
component: Avatar
@ -61,6 +67,10 @@ router.map({
'/toolbar': {
name: 'toolbar',
component: Toolbar
},
'/whiteframe': {
name: 'whiteframe',
component: Whiteframe
}
});

2
src/vue-material.js
View file

@ -9,6 +9,7 @@ import MdToolbar from './components/mdToolbar';
import MdSidenav from './components/mdSidenav';
import MdAvatar from './components/mdAvatar';
import MdList from './components/mdList';
import MdWhiteframe from './components/mdWhiteframe';
export default {
MdAvatar,
@ -20,5 +21,6 @@ export default {
MdList,
MdSidenav,
MdToolbar,
MdWhiteframe,
MdTheme
};