https://github.com/egoist/vue-slim-tabs

A slim tab component for Vue.js (1.3 kB minified)
https://github.com/egoist/vue-slim-tabs

component tabs vue

Last synced: 16 days ago
JSON representation

A slim tab component for Vue.js (1.3 kB minified)

• Host: GitHub
• URL: https://github.com/egoist/vue-slim-tabs
• Owner: egoist
• License: mit
• Created: 2017-06-08T15:55:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:04:22.000Z (almost 2 years ago)
• Last Synced: 2024-10-23T08:31:26.601Z (23 days ago)
• Topics: component, tabs, vue
• Language: Vue
• Homepage: https://vue-slim-tabs.egoist.sh/
• Size: 1.2 MB
• Stars: 103
• Watchers: 4
• Forks: 18
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

  

    

      This is Vue

    

    

      This is React

    

    

      This is Svelte

    

  

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

export default {

  components: {

    Tabs, Tab

  }

}

```

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)

```

Use a slot as tab title


```vue

  

    

      This is Vue

    

    

      Vue

    

  

```

## Props

### ``

#### defaultIndex

Type: `Number`


Default: `0`

Index of selected tab on the first render.

#### onSelect

Type: `function`


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

}

```

### ``

#### title

Type: `string` `vNode`


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`


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.


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)