Giter VIP home page Giter VIP logo

v-switcher's Introduction

v-switcher

usage

yarn add v-switcher
// or
npm i v-switcher
import Vue from 'vue'
import VSwitcher from 'v-switcher'
import 'v-switcher/dist/v-switcher.css'

Vue.component(VSwitcher.name, VSwitcher)

props

name type default required description
headers Array [] Y tab-header 的数组,支持 icon
default-index Number 0 N 默认选中的 tab index
routable Boolean false N 设为 true 则为路由模式
animated Boolean false N 是否支持切换动画
duration Number 300 N 切换动画的时长,ms
align String start N tab 的展示模式 ['around', 'start', 'center', 'end', 'vertical']
swipe Boolean false N 是否支持左右手势滑动
headerTrigger String click N 头部动画触发的方式 ['click', 'hover']
anchorTrigger String click N 锚点动画触发的方式 ['click', 'hover']
anchorPadding Number 0 N 锚点元素的 padding 值
autoplay Number 0 N 自动切换的时长(ms)默认不自动切换
contentWidth String 100% N 每个 content 的宽度,默认 100%
headerHeight Number 40 N 每个 item 的高度(px),默认 40
fixedTop Number undefined N 如果设值,就为 headers fixed 时距离顶部的高度
sticky Boolean false N 是否使用 100% 高度布局
disabledSwipe Boolean false N 是否禁止 swipe 的 touch 事件
continuousSwipe Boolean false N 当使用 swipe 的时候,是否是无限滚动模式,如果 autoplay > 0 则强制为 true

example

用例比较多,比较复杂,等之后有时间了补在线 demo,现在先把项目 clone 到本地 npm run dev 查看吧

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.