a touch swipe tab component for vue.js(vue2).

Overview

vue-tab - swipe tab simplify


This component is already used in production env.

Overview

vue-tab is a touch swipe tab for vue.js.

Install

npm install --save [email protected]

Import using module

use this code in app.js(entry js):

import Tab from 'vue-swipe-tab';
Vue.use(Tab);

Usage

<script>
    export default {
        methods: {
        changePage(idx) {
            console.log(idx);
        }
    }
}
</script>

<template>
    <div class="app">
        <Tabs @changePage="changeFunc" indexTab="friend">
            <TabPanel label="好友榜" hash="friend" fontsize="36" tabheight="90" color="red">
                <div class="first"></div>
            </TabPanel>
            <TabPanel label="全省榜" hash="convince" fontsize="36" tabheight="90" color="red">
                <div class="second"></div>
            </TabPanel>
            <TabPanel label="全国榜" hash="country" fontsize="36" tabheight="90" color="red">
                <div class="three"></div>
            </TabPanel>
        </Tabs>
    </div>
</template>

Options

Here list Props on swipe component

Option Description
label Required, the text of tab header
hash Required, the hash of tab page
indexTab set the index tab by tab's hash
color set the color of tab header cursor
fontSize String, the fontSize of tab Header, is caculated by rem
tabheight String, the tabHeight of tabHeader, is caculated by rem
changePage Event, it will be fired after the page change, you can get the currentPage index in the callback function

Live Demo

https://zhangxiang958.github.io/vue-tab/demo/index.html

License

MIT License

Copyright (c) 2017 Shawn Cheung

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


Contact

You might also like...
Vue3-dynamic-tabs - A Vue component to easily render tabs dynamically

A Vue component to easily render tabs dynamically The package contains a Vue 3 c

A custom Vue tabs component.

cocoda-vue-tabscocoda-vue-tabs A custom Vue tabs component. Note: This is in early development and things might change drastically in the future. Also

A Lightweight and flexible underlined tabs component for VueJS ⚡

Vue-Tabz A Lightweight and flexible underlined tabs component for VueJS ⚡ Demo Live Demo Installing npm install --save vue-tabz Installation & Usage i

Lightweight and flexible tabs component for the web.

Tabs Lightweight and flexible tabs component for the web. Packages Package Version tabs vue-tabs vue-tabs-example Vue.js example react-tabs react-tabs

An easy way to display tabs with Vue

🚨 THIS PACKAGE HAS BEEN ABANDONED 🚨 We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore.

Event-Based communication across opened tabs for Vue 2.x
Event-Based communication across opened tabs for Vue 2.x

vue-tabevents Easy communication between tabs for Vue 2.x Getting Started Installing Install with npm: npm install --save vue-tabevents import into pr

Keen-Slider a free library agnostic touch slider with native touch/swipe behavior and great performance

Keen-Slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10. Furthermore it comes with a React Hook, a React Native Hook and a Vue 3 Composition Function for easier use.

🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe
🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

Vue Picture Swipe Gallery This component is a simple wrapper for the awesome Photoswipe. It's a Vue plugin that displays a gallery of image with swipe

Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

Mobile tab component use vue2

vue-slide-tab mobile tab component use vue2 install npm i vue-slide-tab demo run local serve to check the demo or check online npm run start

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin

vue-pswipe a Vue plugin for PhotoSwipe without set image size online example install npm install vue-pswipe usage // main.js import Photoswipe from '

 Vue Picture Swipe Gallery
Vue Picture Swipe Gallery

This component is a simple wrapper for the awesome Photoswipe.

👆 A swipe out example built with Vue 2 + Vuetify + Swiper.

vuetify-swipeout This project is a swipe out example built with Vue, Vuetify and Swiper. Live Demo Features Vue CLI 3 + Webpack + vue-loader for singl

iOS style swipe actions

vue-swipe-actions iOS style swipe actions for Vue.js, Live Demo (Source) Installation npm install --save vue-swipe-actions import { SwipeList, SwipeO

Simple product carousel with hot image replacement, Zoom and Swipe mode

Vue Product Carousel Simple product carousel with hot image replacement, Zoom and Swipe mode Usage To be able to use this component you should install

A tab completable input component for Vue.js

tab-complete-input This is a tab completable input component for Vue.js. It supports fetching data from a fixed array and dynamically via a method

Vue.js tab components, based on Vue Router.
Vue.js tab components, based on Vue Router.

English | 简体中文 Vue Router Tab A tab router component based on Vue Router. 📌 Features ✅ Open or switch to tabs responding to route change ✅ Tabs mouse

Comments
  • vue-swipe-tab not working in standard vue-cli vue-webpack template environment

    vue-swipe-tab not working in standard vue-cli vue-webpack template environment

    Please fix your code example in README.MD because it does not work. I currently fail to use your component.

    You advise to import Tab from 'vue-swipe-tab'; but you are actually using a custom element <tabs> in your template. Please show working code.

    In your demo code you are instead using

    import { Tabs, Tab } from './Tab';

    and then in the components property:

    components: { Tabs, Tab }

    both of which are commented out in your demo code (why?).


    This is how I tried to make it work:

    import { Tabs, Tab } from 'vue-swipe-tab';

    components: { Tabs, Tab }

    methods: { tabChange(idx) { console.log(idx); }

    <Tabs @changePage="tabChange" indexTab="friend">
                                <TabPanel
                                    label="好友榜"
                                    hash="friend"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="first">1</div>
                                </TabPanel>
                                <TabPanel
                                    label="全省榜"
                                    hash="convince"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="second">2</div>
                                </TabPanel>
                                <TabPanel
                                    label="全国榜"
                                    hash="country"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="three">3</div>
                                </TabPanel>
                            </Tabs>
    

    but that just gives me

    [Vue warn]: Unknown custom element: <Tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    and

    [Vue warn]: Unknown custom element: <TabPanel> - did you register the component correctly? For recursive components, make sure to provide the "name" option.


    2nd try:

    import Tabs from 'vue-swipe-tab'; import Tab from 'vue-swipe-tab';

    and then

    <Tabs @changePage="tabChange" indexTab="friend">
                                <Tab
                                    label="好友榜"
                                    hash="friend"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="first">1</div>
                                </Tab>
                                <Tab
                                    label="全省榜"
                                    hash="convince"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="second">2</div>
                                </Tab>
                                <Tab
                                    label="全国榜"
                                    hash="country"
                                    fontsize="36"
                                    tabheight="90"
                                    color="red">
                                    <div class="three">3</div>
                                </Tab>
                            </Tabs>
    

    gives me

    [Vue warn]: Failed to mount component: template or render function not defined.

    twice in the console.

    opened by franktopel 29
  • Unexpected token <

    Unexpected token <

    After installation npm install --save [email protected]

    And:

    import Tab from 'vue-swipe-tab';
    Vue.use(Tab);
    

    Without inserting any code I get as the only output in the screen:

    Unexpected token <

    opened by educob 0
  • Installation to use inside one component

    Installation to use inside one component

    It would be good to add to the documentation that you can load this component from inside another importing it as:

    import Tabs from 'vue-swipe-tab/lib/index.vue'; import TabPanel from 'vue-swipe-tab/lib/tab.vue';

    Thanks for your component.

    opened by troneras 0
Owner
Shawn Cheung
Golang & Node & Frontend Developer
Shawn Cheung
A tab completable input component for Vue.js

tab-complete-input This is a tab completable <input> component for Vue.js. It supports fetching data from a fixed array and dynamically via a method

Ryan Murthick 2 Jul 21, 2021
Vue.js tab components, based on Vue Router.

English | 简体中文 Vue Router Tab A tab router component based on Vue Router. ?? Features ✅ Open or switch to tabs responding to route change ✅ Tabs mouse

碧海幽虹 424 Jan 3, 2023
Navigation Tab with both plain VUE and VUE + Redux .

Navigation Tab with both plain VUE and VUE + Redux . Featured in Awesome-Vue

Habib 10 Nov 26, 2021
chrome tab like.

vue-tabs-chrome A Vue component for Chrome-like tabs. Drag-and-drop support provided by Draggabilly by @desandro. Live Demo https://viewweiwu.github.i

viewweiwu 204 Nov 21, 2022
A multi-tab system template (PC side, non-responsive) based on vue3.0+ts+element-plus.

A multi-tab system template (PC side, non-responsive) based on vue3.0+ts+element-plus.

null 43 Dec 27, 2022
📃 Replace a new tab page with a beautiful dashboard featuring amazing images, inspirational quotes & a clock

Random New Tab How-to: Install Chrome Extension Go to tab-page on the Chrome extension store and install That's it ?? ! When you load a new tab just m

Tyler Morales 5 Apr 20, 2022
A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.

vue-lumino An example project showing one way to integrate Vue.js and Lumino (née PhosphorJS). Lumino “is a library for building interactive web appli

TupiLabs 62 Dec 26, 2022
Simple Vue 2 component, that allows you to make tabs with moving bottom line

Vue-tabs-with-active-line Simple Vue 2 component, that allows you to make tabs with moving bottom line Demo and example Live demo to play with: Demo-l

Vitaly Blokhin 102 Dec 22, 2022
A flexible tabs-component for Vue

vue-magic-line A tabs-component for Vue. Demo You can find some examples here Configuration Install component Globally import VueMagicLine from 'vue-m

Andreas Stephan 40 Mar 18, 2022
Vue.js tabs component based in material design

Vue.js tabs component based in material design

Jairo Blatt 17 Mar 31, 2022