{"id":13535785,"url":"https://github.com/spatie/vue-tabs-component","last_synced_at":"2025-04-02T02:31:24.264Z","repository":{"id":37334525,"uuid":"90276836","full_name":"spatie/vue-tabs-component","owner":"spatie","description":"An easy way to display tabs with Vue","archived":true,"fork":false,"pushed_at":"2018-10-24T11:22:18.000Z","size":250,"stargazers_count":620,"open_issues_count":0,"forks_count":204,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-23T20:38:44.827Z","etag":null,"topics":["component","javascript","tabs","ui","vue"],"latest_commit_sha":null,"homepage":"http://vue-tabs-component.spatie.be","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-04T15:05:01.000Z","updated_at":"2025-02-16T04:28:29.000Z","dependencies_parsed_at":"2022-08-18T03:45:46.652Z","dependency_job_id":null,"html_url":"https://github.com/spatie/vue-tabs-component","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-tabs-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-tabs-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-tabs-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fvue-tabs-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/vue-tabs-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743633,"owners_count":20826568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","javascript","tabs","ui","vue"],"created_at":"2024-08-01T09:00:27.276Z","updated_at":"2025-04-02T02:31:24.018Z","avatar_url":"https://github.com/spatie.png","language":"JavaScript","funding_links":["https://www.patreon.com/spatie"],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["标签","UI Components","Tabs"],"readme":"🚨 **THIS PACKAGE HAS BEEN ABANDONED** 🚨\n\nWe 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.\n\n# A Vue component to easily render tabs\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/vue-tabs-component.svg?style=flat-square)](https://npmjs.com/package/vue-tabs-component)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![Build Status](https://img.shields.io/travis/spatie/vue-tabs-component/master.svg?style=flat-square)](https://travis-ci.org/spatie/vue-tabs-component)\n[![npm](https://img.shields.io/npm/dt/vue-tabs-component.svg?style=flat-square)](https://www.npmjs.com/package/vue-tabs-component)\n\nThe package contains a [Vue](https://vuejs.org/) component to easily display some tabs.\n\nThis is how they can be used:\n=\n```html\n\u003cdiv\u003e\n    \u003ctabs :options=\"{ useUrlFragment: false }\" @clicked=\"tabClicked\" @changed=\"tabChanged\"\u003e\n        \u003ctab name=\"First tab\"\u003e\n            This is the content of the first tab\n        \u003c/tab\u003e\n        \u003ctab name=\"Second tab\"\u003e\n            This is the content of the second tab\n        \u003c/tab\u003e\n        \u003ctab name=\"Disabled tab\" :is-disabled=\"true\"\u003e\n            This content will be unavailable while :is-disabled prop set to true\n        \u003c/tab\u003e\n        \u003ctab id=\"oh-hi-mark\" name=\"Custom fragment\"\u003e\n            The fragment that is appended to the url can be customized\n        \u003c/tab\u003e\n        \u003ctab prefix=\"\u003cspan class='glyphicon glyphicon-star'\u003e\u003c/span\u003e \" \n             name=\"Prefix and suffix\" \n             suffix=\" \u003cspan class='badge'\u003e4\u003c/span\u003e\"\u003e\n            A prefix and a suffix can be added\n        \u003c/tab\u003e\n    \u003c/tabs\u003e\n\u003c/div\u003e\n```\n\nWhen 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).\n\nThe rendered output adheres to [the ARIA specification](http://heydonworks.com/practical_aria_examples/#tab-interface).\n\n## Demo\n\nYou can see a demo here: http://vue-tabs-component.spatie.be\n\n## Installation\n\nYou can install the package via yarn:\n\n```bash\nyarn add vue-tabs-component\n```\n\nor npm:\n\n```php\nnpm install vue-tabs-component --save\n```\n\n## Usage\n\nThe most common use case is to register the component globally.\n\n```js\n//in your app.js or similar file\nimport Vue from 'vue';\nimport {Tabs, Tab} from 'vue-tabs-component';\n\nVue.component('tabs', Tabs);\nVue.component('tab', Tab);\n```\n\nAlternatively you can do this to register the components:\n\n```js\nimport Tabs from 'vue-tabs-component';\n\nVue.use(Tabs);\n```\n\nOn your page you can now use html like this to render tabs: \n\n```html\n\u003cdiv\u003e\n    \u003ctabs\u003e\n        \u003ctab name=\"First tab\"\u003e\n            First tab content\n        \u003c/tab\u003e\n        \u003ctab name=\"Second tab\"\u003e\n            Second tab content\n        \u003c/tab\u003e\n        \u003ctab name=\"Third tab\"\u003e\n            Third tab content\n        \u003c/tab\u003e\n    \u003c/tabs\u003e\n\u003c/div\u003e\n```\n\nBy default it will show the first tab.\n\nIf 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.\n\nWhen 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`.\n\n### Remembering the last opened tab\n\nBy 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.\n\nYou can change the cache life time by passing the lifetime in minutes in the `cache-lifetime` property of the `tabs` component.\n\n```html\n\u003ctabs cache-lifetime=\"10\"\u003e\n  ...\n\u003c/tabs\u003e\n```\n\n### Disable modifying the url fragment\n\nWhen 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.\n\n```html\n\u003ctabs :options=\"{ useUrlFragment: false }\"\u003e\n  ...\n\u003c/tabs\u003e\n```\n\n### Callbacks\nTabs has two events to which you can bind: `changed` and `clicked`\n\n```html\n\u003ctabs @clicked=\"tabClicked\" @changed=\"tabChanged\"\u003e\n  ...\n\u003c/tabs\u003e\n```\n\n```js\nexport default {\n    ...\n    methods: {\n        ...\n        tabClicked (selectedTab) {\n            console.log('Current tab re-clicked:' + selectedTab.tab.name);\n        },\n        tabChanged (selectedTab) {\n            console.log('Tab changed to:' + selectedTab.tab.name);\n        },\n        ...\n    }\n}\n```\n\n`changed` is emitted when the tab changes and can be used as handle to load data on request.\n`clicked` is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab.\n\n### Adding a suffix and a prefix to the tab name\n\nYou can add a suffix and a prefix to the tab by using the `suffix` and `prefix` attributes.\n\n```html\n\u003ctab prefix=\"my prefix - \" name=\"First tab\" suffix=\" - my suffix\"\u003e\n    First tab content\n\u003c/tab\u003e\n```\n\nThe title of the tab will now be `my prefix - First tab - my suffix`.\n\nThe 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.\n\n### Customizing fragments\n\nWhen 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. \n\nYou can customize that fragment by using the `id` attribute.\n\n```html\n\u003cdiv\u003e\n    \u003ctabs\u003e\n        \u003ctab id=\"custom-fragment\" name=\"My tab\"\u003e\n            First tab content\n        \u003c/tab\u003e\n    \u003c/tabs\u003e\n\u003c/div\u003e\n```\n\nClicking on `My tab` will then append `#custom-fragment` to the url.\n\n\n### Setting a default tab\n\nWhen 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.\n\n```html\n\u003ctabs :options=\"{ defaultTabHash: 'second-tab' }\"\u003e\n    \u003ctab id=\"first-tab\" name=\"First tab\"\u003e\n        First tab content\n    \u003c/tab\u003e\n    \u003ctab id=\"second-tab\" name=\"Default tab\"\u003e\n        Second tab content\n    \u003c/tab\u003e\n\u003c/tabs\u003e\n```\n\n### CSS\n\nYou can use the [CSS](docs/resources/tabs-component.css) from the docs as a starting point for your own styling.\nThe output HTML has namespaced classes to target all nodes directly.\n\n```html\n\u003cdiv class=\"tabs-component\"\u003e\n    \u003cul class=\"tabs-component-tabs\"\u003e\n        \u003cli class=\"tabs-component-tab\"\u003e\n            \u003ca class=\"tabs-component-tab-a\"\u003e…\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cdiv class=\"tabs-component-panels\"\u003e\n        \u003csection class=\"tabs-component-panel\"\u003e\n            …\n        \u003c/section\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Testing\n\n``` bash\n$ yarn test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Security\n\nIf you discover any security related issues, please contact [Freek Van der Herten](https://github.com/freekmurze) instead of using the issue tracker.\n\n## Postcardware\n\nYou'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.\n\nOur address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.\n\nWe publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).\n\n## Credits\n\n- [Freek Van der Herten](https://github.com/freekmurze)\n- [Willem Van Bockstal](https://github.com/willemvb)\n- [Sebastian De Deyne](https://github.com/sebastiandedeyne)\n- [All Contributors](../../contributors)\n\nThis 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)\n\n## Support us\n\nSpatie 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).\n\nDoes your business depend on our contributions? Reach out and support us on [Patreon](https://www.patreon.com/spatie). \nAll pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fvue-tabs-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Fvue-tabs-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fvue-tabs-component/lists"}