vue-tab-component

easy tabs component
1,300 29
vue vue-components right ml vue-tab vue-tab-component dom render light tab left-tab right-tab tabposition left
Install
npm install vue-tab-component
Latest Version:1.6.4
Vue:2
License:MIT
Last Updated:Jan 14, 2020
Links: GitHub  ·  npm
Maintainer: malin258

vue-tab-component

VersionDownloadsLicense

A Vue2.0 tab component which can control DOM render number

Feature

  • Custom DOM render number
  • provide goBegin/goEnd Function
  • suppord left、right Position
  • suppord slot to change tab content

EN || 如果它对你有帮助的话，请Star支持！！！ exemple project

预览

demo

快速开始

Install

npm install vue-tab-component --save

Usage

A simple project use vue-tab-component

main.js

import Vue from 'vue'
import tabs from 'vue-tab-component'

Vue.use(tabs)

API

Attribute

Name Description Type Default
data data of tab {key:'key',title:'word'} Array []
tabPosition tab' position, one of ['top','bottom','left','right'] String bottom
type css type, one of ['card','line'] String line
closable if tab can delete Boolean false
activeName active tab's key String ''
maxnum max number of DOM render tab at once Number 20
beforeChangeTab param: key, tab won't change when return false Function (key) => true
stretch （todo） if tab stretchable because of content Boolean false
hideDirectionBar if tab's left/right bar show or hide Boolean false

Method

Name Description Param
goBegin jump to tab's begin -
goEnd jump to tab's end -
scrollPrev slip to after part -
scrollNext slip to next part -
scrollToActiveTab slip to active tab -

Event

Name Description Param
on-click when tab on clicking, return tab's key key tab's key
on-tab-remove when tab on deleting, return tab's key key tab's key

slot

name data exemple
tab tab's data <template #tab="{ data }">

License

The 996ICU License (996ICU)

Related Packages

@mt-kit/vue-components

Components

300 8
vue-components components
@chidoan/vue-utility-components

Contain vuejs components base on vuetify template

979
vue-components filter-table vuetify-components
@element-plus/theme-chalk

Element Plus component chalk theme.

84,691
vue-components element-plus theme-chalk theme-light
@v-c/tabs

tabs ui component for react

53,437 32
vue-components tabs vc-components vue3
@agrotools1/at-components

Componentes da Agrotools - Versão 2 (com re-export da V1)

20,224
vue vue-components agrotools vue3

Version History

Version Released Vue License
1.6.4 ^2.6.10 MIT
1.6.3 ^2.6.10 MIT
1.6.2 ^2.6.10 MIT
1.6.1 ^2.6.10 MIT
1.6.0 ^2.6.10 MIT