+
@@ -19,9 +19,33 @@
data() {
return {
mounted: false,
- tabId: this.id || 'tab-' + uniqueId()
+ tabId: this.id || 'tab-' + uniqueId(),
+ width: '0px',
+ left: '0px'
};
},
+ watch: {
+ mdActive() {
+ this.updateTabData();
+ },
+ mdDisabled() {
+ this.updateTabData();
+ },
+ mdIcon() {
+ this.updateTabData();
+ },
+ mdLabel() {
+ this.updateTabData();
+ }
+ },
+ computed: {
+ styles() {
+ return {
+ width: this.width,
+ left: this.left
+ };
+ }
+ },
methods: {
getTabData() {
return {
@@ -29,8 +53,12 @@
label: this.mdLabel,
icon: this.mdIcon,
active: this.mdActive,
- disabled: this.mdDisabled
+ disabled: this.mdDisabled,
+ ref: this
};
+ },
+ updateTabData() {
+ this.parentTabs.updateTab(this.getTabData());
}
},
mounted() {
diff --git a/src/components/mdTabs/mdTabs.old.vue b/src/components/mdTabs/mdTabs.old.vue
deleted file mode 100644
index 09574c5..0000000
--- a/src/components/mdTabs/mdTabs.old.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/components/mdTabs/mdTabs.scss b/src/components/mdTabs/mdTabs.scss
index 01af4a1..b842b6f 100644
--- a/src/components/mdTabs/mdTabs.scss
+++ b/src/components/mdTabs/mdTabs.scss
@@ -9,6 +9,16 @@ $tab-max-width: 264px;
flex-flow: column;
position: relative;
+ &.md-transition-off * {
+ transition: none !important;
+ }
+
+ &.md-dynamic-height {
+ .md-tabs-content {
+ transition: height $swift-ease-out-duration $swift-ease-out-timing-function;
+ }
+ }
+
.md-tabs-navigation {
height: 48px;
min-height: 48px;
@@ -82,6 +92,10 @@ $tab-max-width: 264px;
left: 0;
transform: translate3D(0, 0, 0);
+ &.md-transition-off {
+ transition: none !important;
+ }
+
&.md-to-right {
transition: $swift-ease-out,
left .3s $swift-ease-in-out-timing-function,
@@ -95,19 +109,14 @@ $tab-max-width: 264px;
}
}
- .md-transition-off {
- transition: none !important;
- }
-
.md-tabs-content {
width: 100%;
- //height: 0;
+ height: 0;
position: relative;
overflow: hidden;
- transition: height $swift-ease-out-duration $swift-ease-out-timing-function;
}
- /*.md-tabs-wrapper {
+ .md-tabs-wrapper {
width: 9999em;
position: absolute;
top: 0;
@@ -116,28 +125,13 @@ $tab-max-width: 264px;
left: 0;
transform: translate3d(0, 0, 0);
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
- }*/
+ }
.md-tab {
padding: 16px;
- /* position: absolute;
+ position: absolute;
top: 0;
left: 0;
- right: 0; */
- pointer-events: none;
- //transform: translate3d(0, -100%, 0);
- transition: transform 0s $swift-ease-out-duration;
-
- &.md-active {
- transform: translate3d(0, 0, 0);
- pointer-events: auto;
- transition: none;
- }
- }
-}
-
-.md-tabs.md-no-transition {
- .md-tabs-content {
- transition: none !important;
+ right: 0;
}
}
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index 1d9319f..7e76eeb 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -22,8 +22,8 @@