mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-11 08:43:10 +00:00
start app template
This commit is contained in:
Marcos Moura
parent
96871e6943
commit
bd8976ba5c
8 changed files with 808 additions and 559 deletions
|
|
@ -169,10 +169,25 @@
|
|||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/ui-elements/typography">Typography</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/templates/app-template">App Template</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<!-- <md-list-item>
|
||||
<span>Templates</span>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/templates/app-template">App Template</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item> -->
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/changelog">Changelog</router-link>
|
||||
</md-list-item>
|
||||
|
|
|
|||
88
docs/src/pages/templates/AppTemplate.vue
Normal file
88
docs/src/pages/templates/AppTemplate.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<page-content page-title="Templates - App">
|
||||
<docs-component>
|
||||
<div slot="description">
|
||||
<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>
|
||||
<li><code>md-transparent</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<api-table name="md-app-template">
|
||||
<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>empty</md-table-cell>
|
||||
<md-table-cell><code>Type</code></md-table-cell>
|
||||
<md-table-cell>Description</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<div slot="demo">
|
||||
<md-app-template :md-elevation="3" md-waterfall style="height: 300px">
|
||||
<div slot="md-app-toolbar">
|
||||
<span class="md-title">Page Title</span>
|
||||
</div>
|
||||
|
||||
<div slot="md-app-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
</div>
|
||||
</md-app-template>
|
||||
|
||||
<md-app-template md-scroll-reveal style="height: 300px">
|
||||
<div slot="md-app-toolbar">
|
||||
<span class="md-title">Page Title</span>
|
||||
</div>
|
||||
|
||||
<div slot="md-app-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
|
||||
<p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
|
||||
</div>
|
||||
</md-app-template>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
</div>
|
||||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -5,6 +5,10 @@ const About = (r) => require.ensure([], () => r(require('./pages/About')), 'base
|
|||
const Changelog = (r) => require.ensure([], () => r(require('./pages/Changelog')), 'base');
|
||||
const Error404 = (r) => require.ensure([], () => r(require('./pages/Error')), 'base');
|
||||
|
||||
/* Themes */
|
||||
const Configuration = (r) => require.ensure([], () => r(require('./pages/themes/Configuration')), 'themes');
|
||||
const DynamicThemes = (r) => require.ensure([], () => r(require('./pages/themes/DynamicThemes')), 'themes');
|
||||
|
||||
/* Components */
|
||||
const Avatar = (r) => require.ensure([], () => r(require('./pages/components/Avatar')), 'avatar');
|
||||
const BottomBar = (r) => require.ensure([], () => r(require('./pages/components/BottomBar')), 'bottom-bar');
|
||||
|
|
@ -40,9 +44,8 @@ const Whiteframe = (r) => require.ensure([], () => r(require('./pages/components
|
|||
const Typography = (r) => require.ensure([], () => r(require('./pages/ui-elements/Typography')), 'ui-elements');
|
||||
const Layout = (r) => require.ensure([], () => r(require('./pages/ui-elements/Layout')), 'ui-elements');
|
||||
|
||||
/* Themes */
|
||||
const Configuration = (r) => require.ensure([], () => r(require('./pages/themes/Configuration')), 'themes');
|
||||
const DynamicThemes = (r) => require.ensure([], () => r(require('./pages/themes/DynamicThemes')), 'themes');
|
||||
/* Templates */
|
||||
const AppTemplate = (r) => require.ensure([], () => r(require('./pages/templates/AppTemplate')), 'templates');
|
||||
|
||||
const main = [
|
||||
{
|
||||
|
|
@ -67,6 +70,24 @@ const main = [
|
|||
}
|
||||
];
|
||||
|
||||
const theme = [
|
||||
{
|
||||
path: '/themes',
|
||||
name: 'themes',
|
||||
redirect: '/themes/configuration'
|
||||
},
|
||||
{
|
||||
path: '/themes/configuration',
|
||||
name: 'themes:configuration',
|
||||
component: Configuration
|
||||
},
|
||||
{
|
||||
path: '/themes/dynamic-themes',
|
||||
name: 'themes:dynamic-themes',
|
||||
component: DynamicThemes
|
||||
}
|
||||
];
|
||||
|
||||
const components = [
|
||||
{
|
||||
path: '/components',
|
||||
|
|
@ -220,24 +241,6 @@ const components = [
|
|||
}
|
||||
];
|
||||
|
||||
const theme = [
|
||||
{
|
||||
path: '/themes',
|
||||
name: 'themes',
|
||||
redirect: '/themes/configuration'
|
||||
},
|
||||
{
|
||||
path: '/themes/configuration',
|
||||
name: 'themes:configuration',
|
||||
component: Configuration
|
||||
},
|
||||
{
|
||||
path: '/themes/dynamic-themes',
|
||||
name: 'themes:dynamic-themes',
|
||||
component: DynamicThemes
|
||||
}
|
||||
];
|
||||
|
||||
const uiElements = [
|
||||
{
|
||||
path: '/ui-elements',
|
||||
|
|
@ -256,6 +259,19 @@ const uiElements = [
|
|||
}
|
||||
];
|
||||
|
||||
const templates = [
|
||||
{
|
||||
path: '/templates',
|
||||
name: 'templates',
|
||||
redirect: '/templates/app-template'
|
||||
},
|
||||
{
|
||||
path: '/templates/app-template',
|
||||
name: 'templates:app-template',
|
||||
component: AppTemplate
|
||||
}
|
||||
];
|
||||
|
||||
const error = [
|
||||
{
|
||||
path: '*',
|
||||
|
|
@ -264,4 +280,4 @@ const error = [
|
|||
}
|
||||
];
|
||||
|
||||
export default [].concat(main, components, theme, uiElements, error);
|
||||
export default [].concat(main, components, theme, uiElements, templates, error);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import MdCore from './core';
|
||||
|
||||
import MdAvatar from './components/mdAvatar';
|
||||
import MdBackdrop from './components/mdBackdrop';
|
||||
import MdBottomBar from './components/mdBottomBar';
|
||||
|
|
@ -31,6 +32,8 @@ import MdToolbar from './components/mdToolbar';
|
|||
import MdTooltip from './components/mdTooltip';
|
||||
import MdWhiteframe from './components/mdWhiteframe';
|
||||
|
||||
import MdAppTemplate from './templates/mdAppTemplate';
|
||||
|
||||
const options = {
|
||||
MdCore,
|
||||
MdAvatar,
|
||||
|
|
@ -63,7 +66,8 @@ const options = {
|
|||
MdTabs,
|
||||
MdToolbar,
|
||||
MdTooltip,
|
||||
MdWhiteframe
|
||||
MdWhiteframe,
|
||||
MdAppTemplate
|
||||
};
|
||||
|
||||
options.install = (Vue) => {
|
||||
|
|
|
|||
5
src/templates/mdAppTemplate/index.js
Normal file
5
src/templates/mdAppTemplate/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import mdAppTemplate from './mdAppTemplate.vue';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-app-template', mdAppTemplate);
|
||||
}
|
||||
30
src/templates/mdAppTemplate/mdAppTemplate.scss
Normal file
30
src/templates/mdAppTemplate/mdAppTemplate.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.md-app-template {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow: auto;
|
||||
|
||||
&.md-fixed {
|
||||
overflow: auto;
|
||||
|
||||
.md-content {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-scroll-reveal {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.md-content {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
89
src/templates/mdAppTemplate/mdAppTemplate.vue
Normal file
89
src/templates/mdAppTemplate/mdAppTemplate.vue
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="md-app-template" :class="classes" @scroll="onAppScroll">
|
||||
<md-whiteframe md-tag="md-toolbar" :md-elevation="appliedElevation" slot="md-app-toolbar" ref="toolbar">
|
||||
<slot name="md-app-toolbar" v-if="$slots['md-app-toolbar']"></slot>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-sidenav class="md-left" v-if="$slots['md-app-sidenav']">
|
||||
<slot name="md-app-sidenav"></slot>
|
||||
</md-sidenav>
|
||||
|
||||
<div class="md-content" @scroll="onContentScroll">
|
||||
<slot name="md-app-content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdAppTemplate.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdElevation: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
mdFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
mdWaterfall: Boolean,
|
||||
mdScrollReveal: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
calculatedElevation: 0,
|
||||
scrollFactor: 16
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
appliedElevation() {
|
||||
return this.mdWaterfall ? this.calculatedElevation : this.mdElevation;
|
||||
},
|
||||
isFixed() {
|
||||
return !this.mdScrollReveal && this.mdFixed;
|
||||
},
|
||||
classes() {
|
||||
return {
|
||||
'md-fixed': this.isFixed,
|
||||
'md-scroll-reveal': this.mdScrollReveal
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
calculateWaterfall($event) {
|
||||
const elevation = Math.ceil($event.target.scrollTop * this.mdElevation / this.scrollFactor);
|
||||
|
||||
if (elevation <= this.mdElevation) {
|
||||
this.calculatedElevation = elevation;
|
||||
}
|
||||
},
|
||||
calculateScrollReveal($event) {
|
||||
console.log($event.target.scrollTop, this.$refs.toolbar.$el.offsetHeight);
|
||||
},
|
||||
onContentScroll($event) {
|
||||
if (this.mdWaterfall) {
|
||||
window.requestAnimationFrame(() => {
|
||||
this.calculateWaterfall($event);
|
||||
});
|
||||
}
|
||||
},
|
||||
onAppScroll($event) {
|
||||
if (this.mdScrollReveal) {
|
||||
window.requestAnimationFrame(() => {
|
||||
this.calculateScrollReveal($event);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in a new issue