Skip to content

v0.5.0

Pre-release
Pre-release
Compare
Choose a tag to compare
@cristijora cristijora released this 11 Jul 20:29

New

  • Vue-tabs supports 3 different themes now!. They can be found under themes
  • Rewrite with jsx for better modularity
  • Full support for dynamic tab rendering (addition/removal)
  • v-model support to switch tabs programmatically #7
    Usage:
<vue-tabs v-model="tabName">
      <v-tab v-for="(tab, index) in tabs"
             :key="tab.name"
             :title="tab.name"
             icon="ti-user">
        {{tab.name}}
      </v-tab>
</vue-tabs>
export default{
 data(){
  return {
    tabs: [{name:'name1'},{name:'name2'},{name:'name3'}],
    tabName: 'name2'
  }
 }
}
  • value prop (part of v-model) to specify the initial tab that should be open
    value: [String, Number, Object]
  • Vue.use(VueTabs) is no longer needed if the component is included via script tag. Note that it is still needed when used with npm
  • JS bundle size went down from 7kb minified to 4kb minified
  • New title slot to customize tabs
    Usage:
<v-tab>
    <div slot="title"><i class="ti-user"></i> My customized tab</div> 
</v-tab>

Breaking changes/Deprectations

  • start-index is no longer support. v-model/value should be used instead
  • beforeChange has been deprecated/removed. The usage of this prop was not well documented/showed in examples and implied a lot of changes in order to work properly. If you need it, please use vue-form-wizard or make a fork of this repo as I don't want to include validations in vue-tabs
  • vue-router & routing based on tabs is temporarily not supported