Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

ly tab

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Better mobile touch-swappable reusable component for Vue 2.0.

A reusable Vue component for moving end-touch sliding with rebound effect.

This lets you create a scrollable tab that bounces slightly on scroll. Tabs and items can be specified in a json array. There are two fields by default tabList (top) and fixedList (bottom).

tabList: [
...
{itemName: 'Android'},
...
],
fixedList: [
...
{itemName: 'Item 1', icon: 'icon1'},
..
]

demo
vue tab

Installation

npm i ly-tab -S

or

yarn add ly-tab

Usage

import Vue from \'vue\';
import LyTab from \'ly-tab\';

Vue.use(LyTab);

Example

<ly-tab v-model="selected">

<ly-tab-item v-for="(item, index) in tabList" :key="index">

ly-tab-item>
ly-tab>

Build Setup

# install dependencies
npm install
# or
yarn

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

License

MIT’

Github: http://github.com/ScoutYin/ly-tab#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy