# @hiendv/vue-tabs

> Tabs component for Vue.js

Latest version **0.12.6** (published 2021-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hiendv/vue-tabs
pnpm add @hiendv/vue-tabs
yarn add @hiendv/vue-tabs
bun add @hiendv/vue-tabs
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.6 |
| Published | 2021-06-29 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 55.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Hien Dao |
| Maintainers | hiendv |

## Links

- npm: https://www.npmjs.com/package/@hiendv/vue-tabs
- Repository: https://github.com/hiendv/tabs.git#master
- Homepage: https://github.com/hiendv/tabs/tree/master#readme
- Issues: https://github.com/hiendv/tabs/issues
- npm.io page: https://npm.io/package/@hiendv/vue-tabs

## Dependencies (2)

- [@hiendv/tabs](https://npm.io/package/@hiendv/tabs.md) ^0.12.5
- [octicons-vue](https://npm.io/package/octicons-vue.md) ^1.0.11

## Recent versions

- 0.12.6 (latest) — 2021-06-29
- 0.12.5 — 2021-06-04
- 0.3.10 — 2020-07-03
- 0.3.9 — 2020-05-25
- 0.3.8 — 2020-03-25
- 0.3.7 — 2020-02-19
- 0.3.6 — 2020-02-19
- 0.3.5 — 2020-01-31
- 0.3.4 — 2020-01-09
- 0.3.3 — 2020-01-07
- 0.3.2 — 2019-12-26
- 0.3.0 — 2019-10-15
- 0.2.8 — 2019-10-01
- 0.2.7 — 2019-09-13
- 0.2.6 — 2019-09-12
- … 6 more at https://npm.io/package/@hiendv/vue-tabs/versions

## README

# @hiendv/vue-tabs
Lightweight and flexible tabs component for the web :zap:

## Features
- [x] Template-first approach
- [x] Beautiful modulized themes included
- [x] Individual panel styling
- [x] Easy positioning
- [x] Accessible navigation with hash fragment
- [x] Octicons support
- [x] *Ghost* tabs support

## Demo
See [https://hiendv.github.io/tabs](https://hiendv.github.io/tabs)

## Installation & Usage
### CDN
```html
<script src="https://cdn.jsdelivr.net/npm/@hiendv/vue-tabs@latest/dist/iife.js" crossorigin="anonymous"></script>
```
**Note: We recommend linking to a specific version number that you can update manually**
```js
console.log(vuetabs.themeDefault, vuetabs.themeDark)

Vue.component('tabs', vuetabs.Tabs)
Vue.component('tab', vuetabs.Tab)
```

### NPM
```bash
npm install --save vue-tabs
# yarn add vue-tabs
```

```vue
<script>
import Vue from 'vue'
import { Tabs, Tab } from '@hiendv/vue-tabs'

new Vue({
  el: '#app',
  components: { Tabs, Tab }
})
</script>

<template>
  <tabs>
    <tab title="First">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </tab>

    <tab title="Second">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
    </tab>

    <tab title="Third">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur.
    </tab>
  </tabs>
</template>
```
Please see **[vue-tabs-example](/packages/vue-tabs-example)** for a complete demonstration.

## Documentation
### Tabs
#### Props
| Property | Type | Required | Default | Description
|-------|-------|-------|-------|-------|
| theme | Object | No | themeDefault - *[@hiendv/tabs](https://github.com/hiendv/tabs/tree/master/packages/tabs)* | Modulized style
| show | Number | No | 0 | Initial active tab
| keep-alive | Boolean | No | false | Keep the tab panel's state *(New in 0.3.4+)*


#### Methods

| Method | Arguments | Return | Description
|-------|-------|-------|-------|
| loadSlots | () | No | Manually reload the slots


#### Events

| Event | Arguments | Description
|-------|-------|-------|
| update:show | (index) | Current active tab

#### Slots
| Syntax (2.6.0+) | Props | Deprecated syntax
|-------|-------|-------|
| v-slot:nav="props" | { items: Array } | slot="nav" slot-scope="props"

### Tab
#### Props
| Property | Type | Required | Default | Description
|-------|-------|-------|-------|-------|
| title | String | No | 'Title' | Tab title
| icon | Object | No | Empty | Tab octicon - *[octicons-vue](https://github.com/hiendv/octicons-modular/tree/master/packages/octicons-vue)*
| hash | String | No | null | Unique hash fragment for easy boorkmark and navigation
| end | Boolean | No | false | Push the tab and its following friends to the right
| ghost | Boolean | No | false | Mark tab as a pure button

#### Slots
| Syntax (2.6.0+) | Props | Deprecated syntax
|-------|-------|-------|
| v-slot:nav="props" | { key: Number, class: Object, attrs: Object, on: Object } | slot="nav" slot-scope="props"


## Development & Testing
Please check the [Contributing Guidelines](https://github.com/hiendv/tabs/blob/master/CONTRIBUTING.md).

## Contribution
Issues and PRs are welcome !

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