mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-03-16 22:10:27 +00:00
fix md-tabs with v-if and fix whiteframe
This commit is contained in:
Marcos Moura
parent
87fea69779
commit
369aed4ea3
5 changed files with 69 additions and 76 deletions
|
|
@ -1,24 +1,22 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="1" class="main-header">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
|
||||
<md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<div class="md-title">{{ pageTitle }}</div>
|
||||
<div class="md-title">{{ pageTitle }}</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>
|
||||
<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 github">
|
||||
<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-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
|
||||
<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-whiteframe>
|
||||
|
||||
<slot></slot>
|
||||
|
|
@ -33,12 +31,8 @@
|
|||
}
|
||||
|
||||
.main-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.md-toolbar {
|
||||
color: #fff !important;
|
||||
}
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.nav-trigger {
|
||||
|
|
|
|||
|
|
@ -418,32 +418,30 @@
|
|||
<example-box card-title="Complete example">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-whiteframe md-elevation="2" md-tag="md-toolbar" class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
|
|
@ -619,32 +617,30 @@
|
|||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<md-whiteframe md-elevation="2" md-tag="md-toolbar" class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
|
|
|
|||
|
|
@ -43,8 +43,6 @@
|
|||
},
|
||||
computed: {
|
||||
classes() {
|
||||
console.log(this.disabled);
|
||||
|
||||
return {
|
||||
'md-disabled': this.disabled
|
||||
};
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
this.mounted = true;
|
||||
this.parentTabs.registerTab(tabData);
|
||||
this.parentTabs.updateTab(tabData);
|
||||
|
||||
if (this.mdActive) {
|
||||
this.parentTabs.setActiveTab(tabData);
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
if (tabData.active) {
|
||||
if (!tabData.disabled) {
|
||||
this.setActiveTab(tabData);
|
||||
} else {
|
||||
} else if (Object.keys(this.tabList).length) {
|
||||
let tabsIds = Object.keys(this.tabList);
|
||||
let targetIndex = tabsIds.indexOf(tabData.id) + 1;
|
||||
let target = tabsIds[targetIndex];
|
||||
|
|
@ -136,13 +136,15 @@
|
|||
return idList.indexOf(id);
|
||||
},
|
||||
calculateIndicatorPos() {
|
||||
let tabsWidth = this.$el.offsetWidth;
|
||||
let activeTab = this.$refs.tabHeader[this.activeTabNumber];
|
||||
let left = activeTab.offsetLeft;
|
||||
let right = tabsWidth - left - activeTab.offsetWidth;
|
||||
if (this.$refs.tabHeader) {
|
||||
let tabsWidth = this.$el.offsetWidth;
|
||||
let activeTab = this.$refs.tabHeader[this.activeTabNumber];
|
||||
let left = activeTab.offsetLeft;
|
||||
let right = tabsWidth - left - activeTab.offsetWidth;
|
||||
|
||||
this.$refs.indicator.style.left = left + 'px';
|
||||
this.$refs.indicator.style.right = right + 'px';
|
||||
this.$refs.indicator.style.left = left + 'px';
|
||||
this.$refs.indicator.style.right = right + 'px';
|
||||
}
|
||||
},
|
||||
calculateTabsWidthAndPosition() {
|
||||
const width = this.$el.offsetWidth;
|
||||
|
|
@ -161,9 +163,11 @@
|
|||
},
|
||||
calculateContentHeight() {
|
||||
this.$nextTick(() => {
|
||||
let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
|
||||
if (Object.keys(this.tabList).length) {
|
||||
let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
|
||||
|
||||
this.contentHeight = height + 'px';
|
||||
this.contentHeight = height + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
calculatePosition() {
|
||||
|
|
@ -199,7 +203,7 @@
|
|||
this.observeElementChanges();
|
||||
window.addEventListener('resize', this.calculateOnWatch);
|
||||
|
||||
if (this.tabList.length && !this.activeTab) {
|
||||
if (Object.keys(this.tabList).length && !this.activeTab) {
|
||||
let firstTab = Object.keys(this.tabList)[0];
|
||||
|
||||
this.setActiveTab(this.tabList[firstTab]);
|
||||
|
|
@ -208,6 +212,7 @@
|
|||
},
|
||||
beforeDestroy() {
|
||||
this.contentObserver.disconnect();
|
||||
this.navigationObserver.disconnect();
|
||||
window.removeEventListener('resize', this.calculateOnWatch);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue