v-tabs-router
v1.4.0
Published
A tabs Vue.js Plugin
Downloads
14
Readme
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
Development
Build
Bundle the js and css of to the dist
folder:
yarn build
# or
bin/build
Dist
Bundle the js and css min of to the dist
folder:
yarn dist
# or
bin/dist
Release
Bundle aliases for build and dist
yarn release
Publish
bin/publish
bin/publish