vue-slim-tabs
Simple tabs component for Vue.js
Last updated a year ago by egoist .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-slim-tabs 
SYNC missed versions from official npm registry.

tabs

NPM version NPM downloads CircleCI donate

Install

yarn add vue-slim-tabs

CDN: UNPKG | jsDelivr

Usage

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

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

Vue.use(Tabs)
<summary>Use a slot as tab title</summary>
<template>
  <tabs>
    <tab title-slot="vue">
      This is Vue
    </tab>

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

Props

<Tabs>

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:

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

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

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, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

Current Tags

  • 0.4.0                                ...           latest (a year ago)

5 Versions

  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (2)
Downloads
Today 1
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (10)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |