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: 3 months 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 (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:22.000Z (over 2 years ago)
- Last Synced: 2025-04-10T01:14:02.095Z (3 months ago)
- Topics: component, tabs, vue
- Language: Vue
- Homepage: https://vue-slim-tabs.egoist.sh/
- Size: 1.2 MB
- Stars: 102
- Watchers: 3
- Forks: 18
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tabs
[](https://npmjs.com/package/vue-slim-tabs) [](https://npmjs.com/package/vue-slim-tabs) [](https://circleci.com/gh/egoist/vue-slim-tabs/tree/master) [](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)