diff options
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.jsx')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 25 |
1 files changed, 17 insertions, 8 deletions
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 3fff38f6..2f362c4d 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -18,18 +18,27 @@ export default Vue.component('tab-switcher', { const tabs = this.$slots.default .filter(slot => slot.data) .map((slot, index) => { - const classes = ['tab'] + const classesTab = ['tab'] + const classesWrapper = ['tab-wrapper'] if (index === this.active) { - classes.push('active') + classesTab.push('active') + classesWrapper.push('active') } - return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>) + return ( + <div class={ classesWrapper.join(' ')}> + <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> + </div> + ) }); - const contents = ( - <div> - {this.$slots.default.filter(slot => slot.data)[this.active]} - </div> - ); + const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { + const active = index === this.active + return ( + <div class={active ? 'active' : 'hidden'}> + {slot} + </div> + ) + }); return ( <div class="tab-switcher"> <div class="tabs"> |