# vue-simple-tab-switch

> The Vue simple tab component

Latest version **1.0.1** (published 2020-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-simple-tab-switch
pnpm add vue-simple-tab-switch
yarn add vue-simple-tab-switch
bun add vue-simple-tab-switch
```

## 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.0.1 |
| Published | 2020-08-27 |
| First published | 2020-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 91.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | herui |
| Maintainers | heruifornpm |
| Keywords | vue-simple-tab-switch, vue tab, vue tabswitch, tab, switch, vue |

## Links

- npm: https://www.npmjs.com/package/vue-simple-tab-switch
- Repository: https://github.com/githr1314/vue-simple-tab-switch
- Homepage: https://github.com/githr1314/vue-simple-tab-switch.git#readme
- Issues: https://github.com/githr1314/vue-simple-tab-switch/issues
- npm.io page: https://npm.io/package/vue-simple-tab-switch

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-08-27
- 1.0.0 — 2020-08-24

## README

# vue-simple-tab-switch


A simple vue dynamic switch tab


### Notice
Not support IE 不支持IE浏览器

### Example

<img src="https://s1.ax1x.com/2020/08/27/dfvzFI.png" width="300">

### Demo
Run `npm run dev` or `yarn dev`  

运行 `npm run dev` or `yarn dev`

## Installation
**install with NPM**
```bash
npm install vue-simple-tab-switch --save
```
**Import**
```js
import VueTabSwitch from 'vue-simple-tab-switch'

new Vue({
    components: {VueTabSwitch}
})
```
## Usage
**In template**

```html
  <vue-tab-switch 
    :tabs="datas2">
  </vue-tab-switch>
  
  <vue-tab-switch
    :tabs="datas" 
    :textActiveColor="activeColor"
    :textColor="color"
    :lineColor="activeColor"
    @changeTab="changeTab">
  </vue-tab-switch>
```

```js
export default {
  data() {
    return {
      activeColor: '#409eff',
      color: '#c0c4cc',
      datas: [
        {text: '推荐推荐', value: 1},{text: '军事', value: 1},         {text: '历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事军事', value: 1},{text: '历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事', value: 1},{text: '历史历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事', value: 1},{text: '历史', value: 1},{text: '教育', value: 1},
      ],
      datas2: [
        {text: '新闻', value: 1},{text: '教育', value: 1},{text: '历史', value: 1},{text: '科学', value: 1}
      ]
    };
  },
  methods:{
    changeTab : function(res) {
      console.log(res);
    }
  }
}
```
Parameter | Explanation
----|----
tabs | tab data 导航栏数据集
textActiveColor|  actived text color 导航栏选中和触发高亮色
textColor | default text color 导航栏默认颜色
lineColor | line color 下标线的颜色

---
_Source: https://npm.io/package/vue-simple-tab-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._