Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/vue-tabs-component
An easy way to display tabs with Vue
https://github.com/spatie/vue-tabs-component
component javascript tabs ui vue
Last synced: 2 months ago
JSON representation
An easy way to display tabs with Vue
- Host: GitHub
- URL: https://github.com/spatie/vue-tabs-component
- Owner: spatie
- License: mit
- Archived: true
- Created: 2017-05-04T15:05:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-24T11:22:18.000Z (about 6 years ago)
- Last Synced: 2024-10-25T08:53:19.864Z (3 months ago)
- Topics: component, javascript, tabs, ui, vue
- Language: JavaScript
- Homepage: http://vue-tabs-component.spatie.be
- Size: 244 KB
- Stars: 621
- Watchers: 17
- Forks: 205
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue - vue-tabs-component - tabs-component?style=social) - 渲染tabs的Vue组件 (UI组件)
- awesome-github-vue - vue-tabs-component - 渲染tabs的Vue组件 (UI组件)
- awesome-github-vue - vue-tabs-component - 渲染tabs的Vue组件 (UI组件)
- awesome - vue-tabs-component - 渲染tabs的Vue组件 (UI组件)
README
🚨 **THIS PACKAGE HAS BEEN ABANDONED** 🚨
We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore. That's why we have chosen to abandon it. Feel free to fork our code and maintain your own copy.
# A Vue component to easily render tabs
[](https://npmjs.com/package/vue-tabs-component)
[](LICENSE.md)
[](https://travis-ci.org/spatie/vue-tabs-component)
[](https://www.npmjs.com/package/vue-tabs-component)
The package contains a [Vue](https://vuejs.org/) component to easily display some tabs.
This is how they can be used:
=
```html
This is the content of the first tab
This is the content of the second tab
This content will be unavailable while :is-disabled prop set to true
The fragment that is appended to the url can be customized
A prefix and a suffix can be added
```
When reloading the page the component will automatically [display the tab that was previously opened](https://github.com/spatie/vue-tabs-component#remembering-the-last-opened-tab).
The rendered output adheres to [the ARIA specification](http://heydonworks.com/practical_aria_examples/#tab-interface).
## Demo
You can see a demo here: http://vue-tabs-component.spatie.be
## Installation
You can install the package via yarn:
```bash
yarn add vue-tabs-component
```
or npm:
```php
npm install vue-tabs-component --save
```
## Usage
The most common use case is to register the component globally.
```js
//in your app.js or similar file
import Vue from 'vue';
import {Tabs, Tab} from 'vue-tabs-component';
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);
```
Alternatively you can do this to register the components:
```js
import Tabs from 'vue-tabs-component';
Vue.use(Tabs);
```
On your page you can now use html like this to render tabs:
```html
First tab content
Second tab content
Third tab content
```
By default it will show the first tab.
If you click on a tab a `href` representation of the name will be append to the url. For example clicking on the tab `Second tab` will append `#second-tab` to the url.
When loading a page with a fragment that matches the `href` of a tab, it will open up that tab. For example visiting `/#third-tab` will open up the tab with name `Third tab`.
### Remembering the last opened tab
By default the component will remember which was the last open tab for 5 minutes . If you for instance click on `Third tab` and then visit `/` the third tab will be opened.
You can change the cache life time by passing the lifetime in minutes in the `cache-lifetime` property of the `tabs` component.
```html
...
```
### Disable modifying the url fragment
When using with other libraries that use the url fragment, you can disable modifying the url fragment by passing the `useUrlFragment` options. This helps using it with vue-router, or using vue-tabs-component twice in the same page.
```html
...
```
### Callbacks
Tabs has two events to which you can bind: `changed` and `clicked`
```html
...
```
```js
export default {
...
methods: {
...
tabClicked (selectedTab) {
console.log('Current tab re-clicked:' + selectedTab.tab.name);
},
tabChanged (selectedTab) {
console.log('Tab changed to:' + selectedTab.tab.name);
},
...
}
}
```
`changed` is emitted when the tab changes and can be used as handle to load data on request.
`clicked` is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab.
### Adding a suffix and a prefix to the tab name
You can add a suffix and a prefix to the tab by using the `suffix` and `prefix` attributes.
```html
First tab content
```
The title of the tab will now be `my prefix - First tab - my suffix`.
The fragment that's added to the url when clicking the tab will only be based on the `name` of a tab, the `name-prefix` and `name-suffix` attributes will be ignored.
### Customizing fragments
When clicking on a tab it's name will be used as a fragment in the url. For example clicking on the `Second tab` will append `#second-tab` to the current url.
You can customize that fragment by using the `id` attribute.
```html
First tab content
```
Clicking on `My tab` will then append `#custom-fragment` to the url.
### Setting a default tab
When disabling the cache, it can be useful to specify a default tab to load which is not the first one. You can select this by passing the `defaultTabHash` option.
```html
First tab content
Second tab content
```
### CSS
You can use the [CSS](docs/resources/tabs-component.css) from the docs as a starting point for your own styling.
The output HTML has namespaced classes to target all nodes directly.
```html
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
$ yarn test
```
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please contact [Freek Van der Herten](https://github.com/freekmurze) instead of using the issue tracker.
## Postcardware
You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
We publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).
## Credits
- [Freek Van der Herten](https://github.com/freekmurze)
- [Willem Van Bockstal](https://github.com/willemvb)
- [Sebastian De Deyne](https://github.com/sebastiandedeyne)
- [All Contributors](../../contributors)
This package is based on the solution presented by [Jeffrey Way](https://twitter.com/jeffrey_way) in the [practical example #3](https://laracasts.com/series/learn-vue-2-step-by-step/episodes/11) video in the [Vue series](https://vuecasts.com) on [Laracasts](https://laracasts.com)
## Support us
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
Does your business depend on our contributions? Reach out and support us on [Patreon](https://www.patreon.com/spatie).
All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.