mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-26 17:44:48 +00:00
Start documentation template
This commit is contained in:
Marcos Moura
parent
e8db79a933
commit
f92aaa0487
9 changed files with 789 additions and 676 deletions
|
|
@ -84,25 +84,19 @@
|
|||
</md-list>
|
||||
</md-sidenav>
|
||||
|
||||
<div class="page-content">
|
||||
<md-whiteframe class="main-header" md-elevation="2">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-toolbar class="main-header">
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<div class="md-title">
|
||||
<span class="logo-vue-material">Vue Material</span>
|
||||
<span> – </span>
|
||||
<span class="page-title">Home</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="main-content">
|
||||
<router-view></router-view>
|
||||
<div class="md-title">
|
||||
<span class="logo-vue-material">Vue Material</span>
|
||||
<span> – </span>
|
||||
<span class="page-title">{{ pageTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -125,9 +119,14 @@
|
|||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-left: $sizebar-size;
|
||||
}
|
||||
}
|
||||
|
||||
.md-theme-default .md-toolbar:not(.md-theme-white) {
|
||||
.md-theme-default .md-toolbar:not(.md-theme-white):not(.md-theme-grey) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -205,11 +204,12 @@
|
|||
overflow: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-left: $sizebar-size;
|
||||
}
|
||||
.page-content-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
|
|
@ -221,6 +221,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageTitle: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$refs['main-sidebar'].toggle();
|
||||
|
|
|
|||
|
|
@ -12,6 +12,13 @@ Vue.use(VueMaterial.MdTheme, {
|
|||
primary: 'white',
|
||||
accent: 'indigo'
|
||||
},
|
||||
grey: {
|
||||
primary: {
|
||||
color: 'grey',
|
||||
hue: 300
|
||||
},
|
||||
accent: 'indigo'
|
||||
},
|
||||
indigo: {
|
||||
primary: 'indigo',
|
||||
accent: 'blue'
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@ Docs = new Docs({
|
|||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
document.querySelector('.main-content').scrollTop = 0;
|
||||
let mainContent = document.querySelector('.main-content');
|
||||
|
||||
if (mainContent) {
|
||||
mainContent.scrollTop = 0;
|
||||
}
|
||||
|
||||
Docs.closeSidenav();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,77 @@
|
|||
<template>
|
||||
<section>
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
<div class="main-content">
|
||||
<md-whiteframe>
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Default</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
<section>
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
</section>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe>
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Large</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<section>
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Avatar';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,52 @@
|
|||
<template>
|
||||
<section>
|
||||
<div class="cell-phone" v-md-theme="'teal'">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="cell-phone" v-md-theme="'teal'">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
<div class="main-content">
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Default</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Shifting</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-bottom-bar md-shift v-md-theme="'teal'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</md-whiteframe>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cell-phone {
|
||||
width: 360px;
|
||||
height: 480px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc;
|
||||
border: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.md-bottom-bar {
|
||||
|
|
@ -39,8 +59,8 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
ready() {
|
||||
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Bottom Bar';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,49 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="title">Buttons</h2>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-button @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-primary md-raised">Raised</md-button>
|
||||
<md-button class="md-accent md-raised">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-raised md-dense md-accent">Dense</md-button>
|
||||
<div class="main-content">
|
||||
<h2 class="title">Buttons</h2>
|
||||
|
||||
<h2 class="title">Links</h2>
|
||||
<md-button @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-primary md-raised">Raised</md-button>
|
||||
<md-button class="md-accent md-raised">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-raised md-dense md-accent">Dense</md-button>
|
||||
|
||||
<md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button href="#/button" class="md-primary md-raised">Raised</md-button>
|
||||
<md-button href="#/button" class="md-accent md-raised">Accent</md-button>
|
||||
<md-button href="#/button" class="md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
|
||||
<h2 class="title">Links</h2>
|
||||
|
||||
<h2 class="title">FAB</h2>
|
||||
<md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button href="#/button" class="md-primary md-raised">Raised</md-button>
|
||||
<md-button href="#/button" class="md-accent md-raised">Accent</md-button>
|
||||
<md-button href="#/button" class="md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
<h2 class="title">FAB</h2>
|
||||
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</section>
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -47,6 +57,9 @@
|
|||
disablePrimaryButton() {
|
||||
this.buttonDisabled = !this.buttonDisabled;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Button';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<section>
|
||||
<div class="page-content">
|
||||
<h1>Home</h1>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -22,7 +22,7 @@ import Whiteframe from './pages/Whiteframe';
|
|||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue