vue-tab for Vue2.x

###a tab that can be silded to change pages and allow different height、verticle scroll

A project supports for Vue2.x . for Vue1.0 see the "vue-tab.vue1.0" file [deprecated]

demo

live-demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

	<!-- vue data to set tab title: 'tabtitles':['bajian','github'] -->
    <tab :tabtitles="tabtitles" 
    :current-page="3">
    <!-- div contain as each page -->
      <div class="tab-content-container">
        <div>hahaha1</div>
        <img src="http://i2.....">
        <div>hahaha1</div>
        <div>hahaha1</div>
        <img src="http://i2....">
      </div>
      <div class="tab-content-container">
        bajian2
      </div>
    </tab>

Api

Properties

Name	Type	Default	Description
tabtitles	`Array`	`[]`	vue data to set tab title.
current-page	`Number`	`1`	set the current active page start from 1.
slidable	`Boolean`	`true`	set false to disable silding to change a page.
====================	=========	============	===================

the length of tabtitles should match to the page number

Events

Name	Parameters	Description
tab-change-start	`pageNumber`	Fire in the beginning of animation to other slide (next or previous).
tab-change-end	`pageNumber`	Will be fired after animation to other slide (next or previous).
tab-revert-start	`pageNumber`	Fire in the beginning of animation to revert slide (no change).
tab-revert-end	`pageNumber`	Will be fired after animation to revert slide (no change).
==================	================	============================

To set the page the same height (according to the biggest one) ,add the css:

.tabswiper-wrap> div{ height: initial !important;}

bajian/vue-tab

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages