V-tabs-router NPM

V Tabs Router

A vue.js mobile tabs based on vue-router Edit

Installation

npm install --save v-tabs-router
yarn add v-tabs-router

Usage in .vue template (Webpack)

<tabs color='light-blue'>
  <tab name="home" path="/home" icon="fa fa-lg fa-home"></tab>
  <tab name="list" path="/list" icon="fa fa-lg fa-list" label="Tickets"></tab>
  <tab name="account" path="/account" icon="fa fa-lg fa-user"></tab>
  <tab name="about" path="/about" icon="fa fa-lg fa-exclamation"></tab>
</tabs>
<script>

// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-tabs-router/dist/v-tabs-router.css'

import { Tabs, Tab } from 'v-tabs-router'

export default {
  components: { Tabs, Tab }
}
</script>

Tabs properties

color: optional - Tab icons colors
background-color: optional - Tabs background

Tab properties

name: required - Name of the tab. Needs be unique
path: required - Path to go when click
icon: required - Font icon to the tab, can be font-awesome or another font project. For example: 'fa fa-home'
label: optional - Label appears under the icon if present
exact: optional - Only activate tab if the current route match exactly with the tab path