# vue-slim-tabs

> Simple tabs component for Vue.js

Latest version **0.4.0** (published 2019-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-slim-tabs
pnpm add vue-slim-tabs
yarn add vue-slim-tabs
bun add vue-slim-tabs
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2019-08-13 |
| First published | 2017-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 102 |
| Author | egoist |
| Maintainers | egoist, rem |

## Links

- npm: https://www.npmjs.com/package/vue-slim-tabs
- Repository: https://github.com/egoist/vue-slim-tabs
- Homepage: https://github.com/egoist/vue-slim-tabs#readme
- Issues: https://github.com/egoist/vue-slim-tabs/issues
- npm.io page: https://npm.io/package/vue-slim-tabs

## Recent versions

- 0.4.0 (latest) — 2019-08-13
- 0.3.0 — 2017-08-22
- 0.2.0 — 2017-06-09
- 0.1.1 — 2017-06-08
- 0.1.0 — 2017-06-08

## README

# tabs

[![NPM version](https://img.shields.io/npm/v/vue-slim-tabs.svg?style=flat)](https://npmjs.com/package/vue-slim-tabs) [![NPM downloads](https://img.shields.io/npm/dm/vue-slim-tabs.svg?style=flat)](https://npmjs.com/package/vue-slim-tabs) [![CircleCI](https://circleci.com/gh/egoist/vue-slim-tabs/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-slim-tabs/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

## Install

```bash
yarn add vue-slim-tabs
```

CDN: [UNPKG](https://unpkg.com/vue-slim-tabs/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-slim-tabs/dist/)

## Usage

```vue
<template>
  <tabs>
    <tab title="Vue">
      This is Vue
    </tab>
    <tab title="React">
      This is React
    </tab>
    <tab title="Svelte">
      This is Svelte
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-slim-tabs'

export default {
  components: {
    Tabs, Tab
  }
}
</script>

<!-- optionally use our default style -->
<style src="vue-slim-tabs/themes/default.css"></style>
```

You can use it as a plugin if you don't mind registering components globally:

```js
import * as Tabs from 'vue-slim-tabs'

Vue.use(Tabs)
```

<details><summary>Use a slot as tab title</summary><br>

```vue
<template>
  <tabs>
    <tab title-slot="vue">
      This is Vue
    </tab>

    <template slot="vue">
      <strong>Vue</strong>
    </template>
  </tabs>
</template>
```
</details>

## Props

### `<Tabs>`

#### defaultIndex

Type: `Number`<br>
Default: `0`

Index of selected tab on the first render.

#### onSelect

Type: `function`<br>
Default: `undefined`

The function to invoke as user selects a tab by clicking:

```js
function onSelect(e, index) {
  // e: click event
  // index: index of selected tab
}
```

### `<Tab>`

#### title

Type: `string` `vNode`<br>
Required: required unless `titleSlot` is set

Use a string or vNode as tab title.

#### titleSlot

Type: `string`

Use a slot as the tab title.

#### disabled

Type: `Boolean`<br>
Default: `undefined`

Disable relevant tab, i.e. make it unselectable.

## Development

Run the example with [Poi](https://poi.js.org):

```bash
cd vue-slim-tabs
yarn
yarn dev
```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**vue-slim-tabs** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-slim-tabs/contributors)).

> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/rem_rin_rin)

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