mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-08 17:10:57 +00:00
Refactor doc templates
This commit is contained in:
Marcos Moura
parent
d8681b1e5d
commit
c00a78d500
32 changed files with 151 additions and 286 deletions
|
|
@ -141,18 +141,6 @@
|
|||
</div>
|
||||
</md-sidenav>
|
||||
|
||||
<md-toolbar class="main-header" v-if="toolbar">
|
||||
<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">{{ pageTitle }}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -198,10 +186,6 @@
|
|||
}
|
||||
|
||||
.md-title {
|
||||
.logo-vue-material {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,43 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-tabs md-elevation="2" class="page-tabs">
|
||||
<md-tab md-label="Examples">
|
||||
<slot name="examples"></slot>
|
||||
</md-tab>
|
||||
<div class="demo-page">
|
||||
<md-toolbar class="main-header">
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-tab md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
<div class="md-title">
|
||||
<span class="page-title">{{ label }}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-tab md-label="API">
|
||||
<slot name="api"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<div class="page-content">
|
||||
<md-tabs md-elevation="2" class="page-tabs">
|
||||
<md-tab md-label="Examples">
|
||||
<slot name="examples"></slot>
|
||||
</md-tab>
|
||||
|
||||
<slot></slot>
|
||||
<md-tab md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="API">
|
||||
<slot name="api"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.demo-page {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.page-tabs {
|
||||
flex: 1;
|
||||
|
||||
|
|
@ -70,6 +87,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
63
src/docs/components/single-page-banner.vue
Normal file
63
src/docs/components/single-page-banner.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="single-page-banner">
|
||||
<md-toolbar class="single-page-banner">
|
||||
<h1 class="md-title">{{ label }}</h1>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></svg>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button single-page-menu-trigger" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.single-page-banner {
|
||||
min-height: 256px;
|
||||
padding-top: 98px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
color: #fff !important;
|
||||
|
||||
.md-title:first-child {
|
||||
margin-left: 48px;
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.md-button.single-page-menu-trigger {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 2px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-button.github-button {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -7,21 +7,11 @@
|
|||
</md-button>
|
||||
|
||||
<div class="md-title">
|
||||
<span class="logo-vue-material">Vue Material</span>
|
||||
<span> – </span>
|
||||
<span class="page-title">{{ label }}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-toolbar class="single-page-banner">
|
||||
<h1 class="md-title">{{ pageTitle }}</h1>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></svg>
|
||||
</md-button>
|
||||
|
||||
<div class="single-page-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -75,6 +65,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.single-page-menu-trigger {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 2px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-button.github-button {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
|
|
@ -86,17 +85,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label', 'pageTitle'],
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.toolbar = false;
|
||||
},
|
||||
destroyed() {
|
||||
this.$root.toolbar = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import './config.js';
|
|||
import routes from './routes.js';
|
||||
import App from './App';
|
||||
import SinglePage from './components/single-page';
|
||||
import SinglePageBanner from './components/single-page-banner';
|
||||
import DemoPage from './components/demo-page';
|
||||
import DemoExample from './components/demo-example';
|
||||
|
||||
|
|
@ -32,6 +33,7 @@ let handleSectionTheme = (route) => {
|
|||
};
|
||||
|
||||
Vue.component('single-page', SinglePage);
|
||||
Vue.component('single-page-banner', SinglePageBanner);
|
||||
Vue.component('demo-page', DemoPage);
|
||||
Vue.component('demo-example', DemoExample);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="About" page-title="About">
|
||||
|
||||
<single-page class="single-page-home" label="About">
|
||||
<single-page-banner label="About"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'About';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Changelog" page-title="Changelog">
|
||||
|
||||
<single-page class="single-page-home" label="Changelog">
|
||||
<single-page-banner label="Changelog"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Changelog';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Error 404" page-title="Error 404">
|
||||
|
||||
<single-page class="single-page-home" label="Error">
|
||||
<single-page-banner label="Error 404"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Error';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Getting Started" page-title="Getting Started">
|
||||
|
||||
<single-page class="single-page-home" label="Getting Started">
|
||||
<single-page-banner label="Getting Started"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Getting Started';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Introduction" page-title="Vue Material">
|
||||
|
||||
<single-page class="single-page-home" label="Introduction">
|
||||
<single-page-banner label="Introduction"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Avatar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-avatar>
|
||||
|
|
@ -55,11 +55,3 @@
|
|||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Avatar';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Bottom Bar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="phone-viewport">
|
||||
|
|
@ -139,9 +139,6 @@
|
|||
setTheme(theme) {
|
||||
this.playground.theme = theme;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Bottom Bar';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Button Toggle">
|
||||
<div slot="examples">
|
||||
<demo-example label="Multiple" size="2">
|
||||
<md-button-toggle class="md-button-group">
|
||||
|
|
@ -215,11 +215,3 @@
|
|||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Buttom Toggle';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Button">
|
||||
<div slot="examples">
|
||||
<demo-example label="Flat">
|
||||
<md-button @click="disablePrimaryButton">Default</md-button>
|
||||
|
|
@ -161,9 +161,6 @@
|
|||
disablePrimaryButton() {
|
||||
this.buttonDisabled = !this.buttonDisabled;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Button';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Checkbox">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Regular Checkbox</md-checkbox>
|
||||
|
|
@ -54,9 +54,6 @@
|
|||
checkbox: true,
|
||||
checkbox2: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Checkbox';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Icon">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-icon>home</md-icon>
|
||||
|
|
@ -25,11 +25,3 @@
|
|||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Icon';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Input">
|
||||
<div slot="examples">
|
||||
<demo-example label="Regular fields" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
|
|
@ -122,9 +122,6 @@
|
|||
return {
|
||||
initialValue: 'My initial value'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Input';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - List">
|
||||
<div slot="examples">
|
||||
<demo-example label="Single Line">
|
||||
<div class="phone-viewport">
|
||||
|
|
@ -722,9 +722,6 @@
|
|||
toggleSidenav() {
|
||||
this.$refs.sidebar.toggle();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - List';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Radio">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
|
|
@ -83,50 +83,6 @@
|
|||
radio7: 1,
|
||||
radio8: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Radio';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<section>
|
||||
<h2 class="title">Radio</h2>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio1" id="my-test1" name="my-test-group1" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test2" name="my-test-group1" md-value="2">Another radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test3" name="my-test-group1" md-value="3">Another another radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'indigo'">
|
||||
<md-radio class="md-primary" v-model="radio2" id="my-test4" name="my-test-group2" md-value="1">Indigo radio</md-radio>
|
||||
<md-radio class="md-primary" v-model="radio2" id="my-test5" name="my-test-group2" md-value="2">Another indigo radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-radio class="md-primary" v-model="radio3" id="my-test6" name="my-test-group3" md-value="1">Blue radio</md-radio>
|
||||
<md-radio class="md-primary" v-model="radio3" id="my-test7" name="my-test-group3" md-value="2">Another blue radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'orange'">
|
||||
<md-radio class="md-primary" v-model="radio4" id="my-test8" name="my-test-group4" md-value="1">Orange radio</md-radio>
|
||||
<md-radio class="md-primary" v-model="radio4" id="my-test9" name="my-test-group4" md-value="2">Another orange radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-radio class="md-primary" v-model="radio5" id="my-test10" name="my-test-group5" md-value="1">Teal radio</md-radio>
|
||||
<md-radio class="md-primary" v-model="radio5" id="my-test11" name="my-test-group5" md-value="2">Another teal radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio6" id="my-test12" name="my-test-group6" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test13" name="my-test-group6" md-value="2" disabled>Disabled radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test14" name="my-test-group6" md-value="3">Another another radio</md-radio>
|
||||
</div>
|
||||
</section>
|
||||
</template> -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Ripple">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
|
@ -47,11 +47,3 @@
|
|||
color: #4CAF50;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Ripple';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Select">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="field-group">
|
||||
|
|
@ -102,9 +102,6 @@
|
|||
font: '',
|
||||
food: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Select';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Sidenav">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<div class="phone-viewport">
|
||||
|
|
@ -73,9 +73,6 @@
|
|||
close(ref) {
|
||||
console.log('Closed: ' + ref);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Sidenav';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Subheader">
|
||||
<div slot="examples">
|
||||
<demo-example label="With Lists">
|
||||
<div class="phone-viewport">
|
||||
|
|
@ -153,11 +153,3 @@
|
|||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Subheader';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Switch">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
|
|
@ -61,9 +61,6 @@
|
|||
checked6: true,
|
||||
checked7: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Switch';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Tabs">
|
||||
<div slot="examples" class="examples">
|
||||
<demo-example label="Default - Grey Theme" size="3" body-theme="grey">
|
||||
<md-tabs>
|
||||
|
|
@ -215,9 +215,6 @@
|
|||
},
|
||||
firstTabName: 'Movies'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Tabs';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Toolbar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<md-toolbar>
|
||||
|
|
@ -223,11 +223,3 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Toolbar';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Tooltip">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
|
|
@ -70,11 +70,3 @@
|
|||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Tooltip';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<demo-page label="Components - Whiteframe">
|
||||
<div slot="examples" class="whiteframe-list">
|
||||
<demo-example label="Default">
|
||||
<md-whiteframe md-elevation="1">1dp</md-whiteframe>
|
||||
|
|
@ -53,11 +53,3 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Components - Whiteframe';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<h1>Configuration</h1>
|
||||
</div>
|
||||
</template>
|
||||
<single-page class="single-page-home" label="Themes - Configuration">
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Themes - Configuration';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<h1>Dynamic Themes</h1>
|
||||
</div>
|
||||
</template>
|
||||
<single-page class="single-page-home" label="Themes - Dynamic Themes">
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Themes - Dynamic Themes';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<h1>Grid System</h1>
|
||||
</div>
|
||||
</template>
|
||||
<single-page class="single-page-home" label="UI Elements - Grid System">
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Themes - Grid System';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<h1>Typography</h1>
|
||||
</div>
|
||||
</template>
|
||||
<single-page class="single-page-home" label="UI Elements - Typography">
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Themes - Typography';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue