Skip to content

Commit

Permalink
fix(MdTabs): correct indicator position while alignment changed (#1442)
Browse files Browse the repository at this point in the history
`setIndicatorStyles` on `transitionend` for correct position while alignment changed

fix #1432
  • Loading branch information
VdustR authored and marcosmoura committed Jan 26, 2018
1 parent 4722dad commit c5fc2f5
Showing 1 changed file with 20 additions and 3 deletions.
23 changes: 20 additions & 3 deletions src/components/MdTabs/MdTabs.vue
@@ -1,6 +1,6 @@
<template>
<div class="md-tabs" :class="[tabsClasses, $mdActiveTheme]">
<div class="md-tabs-navigation" :class="navigationClasses">
<div class="md-tabs-navigation" :class="navigationClasses" ref="navigation">
<md-button
v-for="({ label, props, icon, disabled, data, events }, index) in MdTabs.items"
:key="index"
Expand Down Expand Up @@ -75,7 +75,8 @@
hasContent: false,
MdTabs: {
items: {}
}
},
alignmentChanging: false
}),
provide () {
return {
Expand Down Expand Up @@ -112,8 +113,24 @@
this.$emit('md-changed', tab)
},
async mdAlignment () {
if (this.alignmentChanging) {
return false
}
this.alignmentChanging = true
await this.$nextTick()
this.setIndicatorStyles()
let cb = event => {
if (event.propertyName !== 'min-width') {
return false
}
this.$refs.navigation.removeEventListener('transitionend', cb)
this.setIndicatorStyles()
this.alignmentChanging = false
}
this.$refs.navigation.addEventListener('transitionend', cb)
}
},
methods: {
Expand Down

0 comments on commit c5fc2f5

Please sign in to comment.