A Vue component to display tabbed content https://wingsline.net/docs/vue-tabs/
|
3 years ago | |
---|---|---|
docs | 5 years ago | |
src | 3 years ago | |
.babelrc | 5 years ago | |
.eslintrc | 5 years ago | |
.gitignore | 5 years ago | |
CHANGELOG.md | 3 years ago | |
CONTRIBUTING.md | 5 years ago | |
LICENSE.md | 5 years ago | |
README.md | 3 years ago | |
package-lock.json | 3 years ago | |
package.json | 3 years ago | |
webpack.config.js | 5 years ago |
A Vue component to display tabs. The tab handles are separated from the tab panels.
Usage
<div id="app">
<!-- tabs will come here -->
<tabs for="foo"></tabs>
<!-- tab content -->
<panels name="foo" class="foo">
<panel name="English">
This is the english content
</panel>
<panel name="Spanish">
Spanish content
</panel>
</panels>
</div>
For the demo please visit vue-tabs.
You can install the package via yarn:
yarn add wingsline-vue-tabs
or npm:
npm install wingsline-vue-tabs --save
This component uses vue events to trigger tabs. You need to configure an event handler:
window.Vue = require("vue");
// // Create a global Event Bus
const EventBus = new window.Vue();
// Add to Vue properties by exposing a getter for $bus
Object.defineProperties(window.Vue.prototype, {
$bus: {
get: function () {
return EventBus;
}
}
});
import { Panels, Panel, Tabs } from "wingsline-vue-tabs";
new window.Vue({
components: {Panels, Panel, Tabs},
el: "#app"
});
Please see CHANGELOG for more information what has changed recently.
Coming soon
Please see CONTRIBUTING for details.
If you discover any security related issues, please contact Arpad Olasz instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.