Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-24 08:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create demo component

Browse source
This commit is contained in:
Marcos Moura 2016-09-12 15:02:26 -03:00
parent 1b3e2509ab
commit b0a9b2fd62
4 changed files with 153 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -54,6 +54,7 @@
"vue-loader": "^9.3.2",
"vue-router": "^2.0.0-rc.4",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.0.0-rc.5",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2",

49
src/docs/components/demo.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<div class="page-content">
<md-tabs md-elevation="2" class="page-tabs">
<md-tab md-label="Examples">
<slot name="examples"></slot>
</md-tab>
<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>
</template>
<style lang="scss">
@import '../../core/stylesheets/variables.scss';
.page-tabs {
flex: 1;
> .md-whiteframe > .md-tabs-navigation {
padding-left: 52px;
@media (min-width: 1280px) {
padding-left: 8px;
}
.md-tab-indicator {
background-color: #fff;
}
}
> .md-tabs-content {
overflow-y: auto;
}
}
</style>
<script>
export default {
};
</script>

3
src/docs/index.js
View file

@ -6,6 +6,7 @@ import VueRouter from 'vue-router';
import './config.js';
import routes from './routes.js';
import App from './App';
import Demo from './components/demo';
Vue.use(VueRouter);
@ -17,6 +18,8 @@ let router = new VueRouter({
let Docs = Vue.component('app', App);
Vue.component('demo', Demo);
Docs = new Docs({
el: '#app',
router

217
src/docs/pages/Tabs.vue
View file

@ -1,145 +1,128 @@
<template>
<div class="page-content">
<md-tabs md-elevation="2" class="page-tabs">
<md-tab md-label="Examples">
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Default</h2>
</md-toolbar>
<demo>
<div slot="examples">
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Default</h2>
</md-toolbar>
<section>
<md-tabs>
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section>
<md-tabs>
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Fixed</h2>
</md-toolbar>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Fixed</h2>
</md-toolbar>
<section>
<md-tabs md-fixed class="md-accent">
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section>
<md-tabs md-fixed class="md-accent">
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">With icons and text</h2>
</md-toolbar>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">With icons and text</h2>
</md-toolbar>
<section v-md-theme="'teal'">
<md-tabs md-fixed>
<md-tab md-label="Movies" md-icon="ondemand_video">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section v-md-theme="'teal'">
<md-tabs md-fixed>
<md-tab md-label="Movies" md-icon="ondemand_video">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music" md-icon="music_note">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Music" md-icon="music_note">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Books" md-icon="books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Books" md-icon="books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Pictures" md-icon="photo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-tab md-label="Pictures" md-icon="photo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Centered with only icon</h2>
</md-toolbar>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Centered with only icon</h2>
</md-toolbar>
<section v-md-theme="'green'">
<md-tabs md-centered>
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section v-md-theme="'green'">
<md-tabs md-centered>
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
</md-tab>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
</div>
<md-tab md-label="Code">
<h2>Code</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
</md-tab>
<div slot="code">
<h2>Code</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
</div>
<md-tab md-label="API">
<h2>API</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
</md-tab>
</md-tabs>
</div>
<div slot="api">
<h2>Code</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
</div>
</demo>
</template>
<style lang="scss">
.page-tabs {
flex: 1;
> .md-whiteframe > .md-tabs-navigation {
padding-left: 52px;
.md-tab-indicator {
background-color: #fff;
}
}
> .md-tabs-content {
overflow-y: auto;
}
.cell-phone {
width: 100%;
max-width: 412px;