/v-tab-bar

A Vue Tab Bar Navigator of Mobile App

Primary LanguageJavaScript

v-tab-bar

A Vue Tab Bar Navigator

Installation

Using yarn

yarn add v-tab-bar

Using npm

npm i --save v-tab-bar

DEMO

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'

import VTabBar from 'v-tab-bar'

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

Vue.use(VTabBar)

Browser

<!-- Include after Vue -->
<link rel="stylesheet" href="v-tab-bar/dist/v-tab-bar.css"></link>
<script src="v-tab-bar/dist/v-tab-bar.js"></script>

Example

<router-view class="v-tab-bar-router-view"></router-view>

<v-tab-bar>
  <v-tab-bar-item to="/home" label="Home">
    <i class="fa fa-home"></i>
  </v-tab-bar-item>
  <v-tab-bar-item to="/list" label="List">
    <i class="fa fa-list"></i>
  </v-tab-bar-item>
  <v-tab-bar-item to="/account" label="Account">
    <i class="fa fa-user"></i>
  </v-tab-bar-item>
  <v-tab-bar-item to="/config">
    <i class="fa fa-bars"></i>
  </v-tab-bar-item>
  <v-tab-bar-item to="/options" label="Options">
    <i class="fa fa-cog"></i>
  </v-tab-bar-item>
</v-tab-bar>

Development

Start demo/development environment

$ yarn start

Demo dist

$ yarn dist:demo

Dist

$ yarn dist

Contribution

You're free to contribute to this project by submitting issues and/or pull requests

License

This project is licensed under MIT License