mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-20 04:51:51 +00:00
Create new documentation template for components
This commit is contained in:
Marcos Moura
parent
f53e9bc0b6
commit
8cf8868adf
11 changed files with 578 additions and 40 deletions
|
|
@ -29,7 +29,7 @@
|
|||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body class="md-scrollbar">
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<docs></docs>
|
||||
</div>
|
||||
|
|
|
|||
37
docs/src/components/ApiTable.vue
Normal file
37
docs/src/components/ApiTable.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="api-table">
|
||||
<h3 class="md-title">{{ name }}</h3>
|
||||
|
||||
<md-tabs class="md-transparent">
|
||||
<md-tab class="api-tab" md-label="Properties" v-if="$slots.properties">
|
||||
<slot name="properties"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab class="api-tab" md-label="Events" v-if="$slots.events">
|
||||
<slot name="events"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab class="api-tab" md-label="Methods" v-if="$slots.methods">
|
||||
<slot name="methods"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.api-tab {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
62
docs/src/components/DocsComponent.vue
Normal file
62
docs/src/components/DocsComponent.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="main-content component-docs">
|
||||
<div class="usage-content">
|
||||
<section class="component-description">
|
||||
<h2 class="md-headline"># Component:</h2>
|
||||
|
||||
<slot name="description"></slot>
|
||||
</section>
|
||||
|
||||
<section class="api-documentation">
|
||||
<h2 class="md-headline"># API Options:</h2>
|
||||
|
||||
<slot name="api"></slot>
|
||||
</section>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div class="example-content">
|
||||
<slot name="example"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-docs {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.md-headline {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 36px;
|
||||
border-top: 1px solid rgba(#000, .12);
|
||||
}
|
||||
|
||||
.usage-content {
|
||||
padding-right: 8px;
|
||||
flex: 1 1 45%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.component-description {
|
||||
.md-headline {
|
||||
@media (min-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example-content {
|
||||
padding-left: 8px;
|
||||
flex: 1 1 55%;
|
||||
}
|
||||
</style>
|
||||
44
docs/src/components/ExampleBox.vue
Normal file
44
docs/src/components/ExampleBox.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<md-card class="example-box">
|
||||
<md-toolbar class="md-dense example-title" v-md-theme="'white'">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
|
||||
<md-tabs md-right :md-dynamic-height="false" class="md-transparent example-tabs">
|
||||
<md-tab class="example-content" md-label="Demo">
|
||||
<slot name="demo"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab class="code-content" md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-box + .example-box {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
border-bottom: 1px solid rgba(#000, .12);
|
||||
|
||||
.md-title {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.example-tabs {
|
||||
margin-top: -48px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
cardTitle: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
62
docs/src/components/PageContent.vue
Normal file
62
docs/src/components/PageContent.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="1">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<div class="md-title">Configuration</div>
|
||||
|
||||
<div class="release-version">
|
||||
<span>Version:</span>
|
||||
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
|
||||
<md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
|
||||
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-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"></path></svg>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.release-version {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.md-select {
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
margin: 0 8px;
|
||||
|
||||
&:after {
|
||||
color: rgba(#fff, .87);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
currentDocs: '0.4.0',
|
||||
availableDocs: ['0.4.0', '0.3.0']
|
||||
}),
|
||||
methods: {
|
||||
changeDocs() {
|
||||
console.log(this.currentDocs);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -14,6 +14,12 @@ highlight.registerLanguage('javascript', highlightJS);
|
|||
import './config.js';
|
||||
import routes from './routes.js';
|
||||
import App from './App';
|
||||
|
||||
import PageContent from './components/PageContent';
|
||||
import DocsComponent from './components/DocsComponent';
|
||||
import ExampleBox from './components/ExampleBox';
|
||||
import ApiTable from './components/ApiTable';
|
||||
|
||||
import SinglePage from './components/single-page';
|
||||
import SinglePageBanner from './components/single-page-banner';
|
||||
import SinglePageSection from './components/single-page-section';
|
||||
|
|
@ -22,6 +28,11 @@ import DemoExample from './components/demo-example';
|
|||
import CodeBlock from './components/code-block';
|
||||
|
||||
|
||||
Vue.component('page-content', PageContent);
|
||||
Vue.component('docs-component', DocsComponent);
|
||||
Vue.component('example-box', ExampleBox);
|
||||
Vue.component('api-table', ApiTable);
|
||||
|
||||
Vue.component('single-page', SinglePage);
|
||||
Vue.component('single-page-banner', SinglePageBanner);
|
||||
Vue.component('single-page-section', SinglePageSection);
|
||||
|
|
@ -43,7 +54,7 @@ let handleSectionTheme = (currentRoute) => {
|
|||
} else if (currentRoute.name.indexOf('components') >= 0) {
|
||||
Docs.theme = 'indigo';
|
||||
} else if (currentRoute.name.indexOf('themes') >= 0) {
|
||||
Docs.theme = 'teal';
|
||||
Docs.theme = 'blue';
|
||||
} else if (currentRoute.name.indexOf('ui-elements') >= 0) {
|
||||
Docs.theme = 'blue-grey';
|
||||
} else if (currentRoute.name.indexOf('changelog') >= 0) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,311 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Themes - Configuration">
|
||||
<page-content>
|
||||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Adipisicing elit. Perspiciatis dolorum, culpa veniam voluptatem nam. Animi sint incidunt cum, ut quod consectetur repellat eos. Tempore officia voluptas, commodi impedit quos animi.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dololat eos. Tempore officia voluptas, commodi impedit quos animi.</p>
|
||||
<p>Lorem ipsum dolor sipellat eos. Tempore officia voluptas, commodi impedit quos animi.</p>
|
||||
</div>
|
||||
|
||||
</single-page>
|
||||
<div slot="api">
|
||||
<api-table name="mdCard">
|
||||
<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>md-with-hover</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Enable full hover in card</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
|
||||
<md-table slot="methods">
|
||||
<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>md-with-hover</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Enable full hover in card</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="Regular Cards">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-menu md-size="4" md-direction="bottom left">
|
||||
<md-button class="md-icon-button" md-menu-trigger>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item>
|
||||
<span>Call</span>
|
||||
<md-icon>phone</md-icon>
|
||||
</md-menu-item>
|
||||
|
||||
<md-menu-item>
|
||||
<span>Send a message</span>
|
||||
<md-icon>message</md-icon>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dicta maxime quibusdam voluptas. Eum atque sint, voluptates illo maxime nihil quisquam quae, et quia qui aut, suscipit deserunt corporis cupiditate?</p>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Regular Cards">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-menu md-size="4" md-direction="bottom left">
|
||||
<md-button class="md-icon-button" md-menu-trigger>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item>
|
||||
<span>Call</span>
|
||||
<md-icon>phone</md-icon>
|
||||
</md-menu-item>
|
||||
|
||||
<md-menu-item>
|
||||
<span>Send a message</span>
|
||||
<md-icon>message</md-icon>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dicta maxime quibusdam voluptas. Eum atque sint, voluptates illo maxime nihil quisquam quae, et quia qui aut, suscipit deserunt corporis cupiditate?</p>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Regular Cards">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-menu md-size="4" md-direction="bottom left">
|
||||
<md-button class="md-icon-button" md-menu-trigger>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item>
|
||||
<span>Call</span>
|
||||
<md-icon>phone</md-icon>
|
||||
</md-menu-item>
|
||||
|
||||
<md-menu-item>
|
||||
<span>Send a message</span>
|
||||
<md-icon>message</md-icon>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dicta maxime quibusdam voluptas. Eum atque sint, voluptates illo maxime nihil quisquam quae, et quia qui aut, suscipit deserunt corporis cupiditate?</p>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Regular Cards">
|
||||
<div class="card-holder" slot="demo">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-menu md-size="4" md-direction="bottom left">
|
||||
<md-button class="md-icon-button" md-menu-trigger>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item>
|
||||
<span>Call</span>
|
||||
<md-icon>phone</md-icon>
|
||||
</md-menu-item>
|
||||
|
||||
<md-menu-item>
|
||||
<span>Send a message</span>
|
||||
<md-icon>message</md-icon>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dicta maxime quibusdam voluptas. Eum atque sint, voluptates illo maxime nihil quisquam quae, et quia qui aut, suscipit deserunt corporis cupiditate?</p>
|
||||
</div>
|
||||
</example-box>
|
||||
</div>
|
||||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-holder {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
"autosize": "^3.0.18",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"scopedQuerySelectorShim": "lazd/scopedQuerySelectorShim",
|
||||
"vue": "^2.0.8"
|
||||
"vue": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.5.3",
|
||||
|
|
@ -78,10 +78,10 @@
|
|||
"sass-loader": "^4.0.2",
|
||||
"vue-hot-reload-api": "^2.0.6",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^9.9.5",
|
||||
"vue-loader": "^10.0.0",
|
||||
"vue-router": "^2.0.3",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vue-template-compiler": "^2.0.8",
|
||||
"vue-template-compiler": "^2.1.0",
|
||||
"webpack": "^1.13.3",
|
||||
"webpack-dev-middleware": "^1.8.4",
|
||||
"webpack-hot-middleware": "^2.13.2",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,12 @@ $tab-max-width: 264px;
|
|||
}
|
||||
}
|
||||
|
||||
&.md-right {
|
||||
.md-tabs-navigation {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-fixed {
|
||||
.md-tab-header {
|
||||
flex: 1;
|
||||
|
|
@ -135,3 +141,9 @@ $tab-max-width: 264px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs.md-no-transition {
|
||||
.md-tabs-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,11 @@
|
|||
props: {
|
||||
mdFixed: Boolean,
|
||||
mdCentered: Boolean,
|
||||
mdRight: Boolean,
|
||||
mdDynamicHeight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
mdElevation: [String, Number]
|
||||
},
|
||||
data() {
|
||||
|
|
@ -62,7 +67,7 @@
|
|||
if (transitionCounter > 200) {
|
||||
window.clearInterval(transitionInterval);
|
||||
}
|
||||
}, 1);
|
||||
}, 10);
|
||||
|
||||
this.recalculateAllTabsPos();
|
||||
},
|
||||
|
|
@ -77,7 +82,9 @@
|
|||
tabClasses() {
|
||||
return {
|
||||
'md-fixed': this.mdFixed,
|
||||
'md-right': !this.mdCentered && this.mdRight,
|
||||
'md-centered': this.mdCentered || this.mdFixed,
|
||||
'md-no-transition': !this.mdDynamicHeight,
|
||||
'md-has-icon': this.hasIcons,
|
||||
'md-has-label': this.hasLabel
|
||||
};
|
||||
|
|
@ -141,13 +148,13 @@
|
|||
this.activeTab = id;
|
||||
this.activeTabNumber = index;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', index);
|
||||
|
||||
window.setTimeout(() => {
|
||||
this.calculateIndicatorPos();
|
||||
this.calculateTabPos(this.tabs[id].ref, index);
|
||||
this.setVisibleTab(this.tabs[id].ref);
|
||||
});
|
||||
|
||||
this.$emit('change', index);
|
||||
},
|
||||
handleTabData(data) {
|
||||
let idList = Object.keys(this.tabs);
|
||||
|
|
@ -156,10 +163,8 @@
|
|||
this.hasIcons = !!data.icon;
|
||||
this.hasLabel = !!data.label;
|
||||
|
||||
if (!data.disabled) {
|
||||
if (data.active) {
|
||||
this.changeTab(data.id);
|
||||
}
|
||||
if (!data.disabled && data.active) {
|
||||
this.changeTab(data.id);
|
||||
} else {
|
||||
this.changeTab(idList[index + 1]);
|
||||
}
|
||||
|
|
@ -167,13 +172,12 @@
|
|||
registerTab(data) {
|
||||
this.tabs[data.id] = data;
|
||||
this.handleTabData(data);
|
||||
this.calculateTabPos(this.tabs[data.id].ref, Object.keys(this.tabs).length - 1);
|
||||
},
|
||||
updateTabData(data) {
|
||||
this.tabs[data.id] = data;
|
||||
this.handleTabData(data);
|
||||
this.$forceUpdate();
|
||||
this.recalculateAllTabsPos();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
recalculateAllTabsPos(transitionOff) {
|
||||
if (typeof transitionOff === 'undefined') {
|
||||
|
|
@ -194,6 +198,7 @@
|
|||
this.changeTab();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', this.recalculateAllTabsPos);
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
|
|||
45
yarn.lock
45
yarn.lock
|
|
@ -174,8 +174,8 @@ async@^1.3.0, async@^1.5.0:
|
|||
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
|
||||
|
||||
async@^2.0.1:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
|
||||
version "2.1.4"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
|
||||
dependencies:
|
||||
lodash "^4.14.0"
|
||||
|
||||
|
|
@ -1008,8 +1008,8 @@ camelcase@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
|
||||
|
||||
caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
|
||||
version "1.0.30000584"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000584.tgz#cfbce897a48145fa73f96d893025581e838648c4"
|
||||
version "1.0.30000585"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000585.tgz#9509aeb2bd1df72155cc7d80074f2ad79560ae28"
|
||||
|
||||
caseless@~0.11.0:
|
||||
version "0.11.0"
|
||||
|
|
@ -1416,8 +1416,8 @@ d@^0.1.1, d@~0.1.1:
|
|||
es5-ext "~0.10.2"
|
||||
|
||||
dashdash@^1.12.0:
|
||||
version "1.14.0"
|
||||
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
|
||||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
|
|
@ -2152,8 +2152,8 @@ globule@^1.0.0:
|
|||
minimatch "~3.0.2"
|
||||
|
||||
graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
|
||||
version "4.1.10"
|
||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
|
||||
version "4.1.11"
|
||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
|
||||
|
||||
"graceful-readlink@>= 1.0.0":
|
||||
version "1.0.1"
|
||||
|
|
@ -2536,7 +2536,7 @@ is-plain-obj@^1.0.0:
|
|||
|
||||
is-posix-bracket@^0.1.0:
|
||||
version "0.1.1"
|
||||
resolved "http://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
|
||||
resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
|
||||
|
||||
is-primitive@^2.0.0:
|
||||
version "2.0.0"
|
||||
|
|
@ -3506,8 +3506,8 @@ postcss-discard-overridden@^0.1.1:
|
|||
postcss "^5.0.16"
|
||||
|
||||
postcss-discard-unused@^2.2.1:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.2.tgz#5d72f7d05d11de0a9589e001958067ccae1b4931"
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
|
||||
dependencies:
|
||||
postcss "^5.0.14"
|
||||
uniqs "^2.0.0"
|
||||
|
|
@ -3684,8 +3684,8 @@ postcss-zindex@^2.0.1:
|
|||
uniqs "^2.0.0"
|
||||
|
||||
postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5:
|
||||
version "5.2.5"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056"
|
||||
version "5.2.6"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
|
||||
dependencies:
|
||||
chalk "^1.1.3"
|
||||
js-base64 "^2.1.9"
|
||||
|
|
@ -4581,8 +4581,8 @@ vm-browserify@0.0.4:
|
|||
indexof "0.0.1"
|
||||
|
||||
vue:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.0.5.tgz#b99dc7180a802d1148a508db3d84b52c09b5ca8e"
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.0.tgz#293ba3efaaca846aa6bcbfac45cf8524cc597e3d"
|
||||
|
||||
vue-hot-reload-api, vue-hot-reload-api@^2.0.1:
|
||||
version "2.0.6"
|
||||
|
|
@ -4599,8 +4599,8 @@ vue-html-loader:
|
|||
object-assign "^4.1.0"
|
||||
|
||||
vue-loader:
|
||||
version "9.9.5"
|
||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-9.9.5.tgz#0893e3093e90c8fbe852053b2b0f4854a3bf4651"
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-10.0.0.tgz#4adc4b911367c8b68f635d99158ed8ef5739a52b"
|
||||
dependencies:
|
||||
consolidate "^0.14.0"
|
||||
hash-sum "^1.0.2"
|
||||
|
|
@ -4613,7 +4613,6 @@ vue-loader:
|
|||
source-map "^0.5.6"
|
||||
vue-hot-reload-api "^2.0.1"
|
||||
vue-style-loader "^1.0.0"
|
||||
vue-template-compiler "^2.0.5"
|
||||
vue-template-es2015-compiler "^1.2.2"
|
||||
|
||||
vue-router:
|
||||
|
|
@ -4626,16 +4625,16 @@ vue-style-loader, vue-style-loader@^1.0.0:
|
|||
dependencies:
|
||||
loader-utils "^0.2.7"
|
||||
|
||||
vue-template-compiler, vue-template-compiler@^2.0.5:
|
||||
version "2.0.8"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.0.8.tgz#e91e1ed6b9b7404f8394166cfeb53eb8b620329a"
|
||||
vue-template-compiler:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.0.tgz#b920111b239b2c4234a5ffd78ca42cb664f06559"
|
||||
dependencies:
|
||||
de-indent "^1.0.2"
|
||||
he "^1.1.0"
|
||||
|
||||
vue-template-es2015-compiler@^1.2.2:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.2.4.tgz#f8068d805bd93b0b47afb9dc9f47976f77c8282a"
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.3.0.tgz#4a0f2a0bbef8b5731f78add8263cd86fe4f643ca"
|
||||
|
||||
watchpack@^0.2.1:
|
||||
version "0.2.9"
|
||||
|
|
|
|||
Loading…
Reference in a new issue