# v-tabs-router

> A tabs Vue.js Plugin

Latest version **1.4.0** (published 2017-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-tabs-router
pnpm add v-tabs-router
yarn add v-tabs-router
bun add v-tabs-router
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2017-04-19 |
| First published | 2017-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Daniel Fernando Lourusso |
| Maintainers | dflourusso |

## Links

- npm: https://www.npmjs.com/package/v-tabs-router
- Repository: https://github.com/dflourusso/v-tabs-router
- Homepage: https://github.com/dflourusso/v-tabs-router#readme
- Issues: https://github.com/dflourusso/v-tabs-router/issues
- npm.io page: https://npm.io/package/v-tabs-router

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.2.6
- [vue-router](https://npm.io/package/vue-router.md) ^2.3.0

## Recent versions

- 1.4.0 (latest) — 2017-04-19
- 1.3.0 — 2017-04-19
- 1.2.0 — 2017-04-18
- 1.1.5 — 2017-04-17
- 1.1.4 — 2017-04-17
- 1.1.3 — 2017-04-17
- 1.1.2 — 2017-04-17
- 1.1.1 — 2017-04-17
- 1.1.0 — 2017-04-17
- 1.0.2 — 2017-04-17
- 1.0.1 — 2017-04-17

## README

V Tabs Router
---

[![npm](https://img.shields.io/npm/v/v-tabs-router.svg)](https://www.npmjs.com/package/v-tabs-router) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

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

Installation
------------

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

### Usage in *.vue* template (Webpack)

```html
<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:

```bash
yarn build
# or
bin/build
```

### Dist

Bundle the js and css min of to the `dist` folder:

```bash
yarn dist
# or
bin/dist
```

### Release

Bundle aliases for build and dist

```bash
yarn release
```

### Publish

`bin/publish`

```bash
bin/publish
```

### Author

[Daniel Fernando Lourusso](http://dflourusso.com.br)

License
-------

[MIT](http://opensource.org/licenses/MIT)

![](https://github.com/dflourusso/v-tabs-router/blob/master/print.png)

---
_Source: https://npm.io/package/v-tabs-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._