vue-tabs

Wingsline Vue Tabs

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>

Demo

For the demo please visit vue-tabs.

Installation

You can install the package via yarn:

yarn add wingsline-vue-tabs

or npm:

npm install wingsline-vue-tabs --save

Usage

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"
});

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

Coming soon

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact Arpad Olasz instead of using the issue tracker.

Credits

• Arpad Olasz

License

The MIT License (MIT). Please see License File for more information.