A Vue component to display tabbed content https://wingsline.net/docs/vue-tabs/

Arpad Olasz b1ed20d189 Update 'README.md' 7 months ago
docs 84180011c3 first commit 2 years ago
src e7dd01208d ability to add class to tab 1 year ago
.babelrc 84180011c3 first commit 2 years ago
.eslintrc 84180011c3 first commit 2 years ago
.gitignore 84180011c3 first commit 2 years ago
CHANGELOG.md 8eb23ae962 Update 'CHANGELOG.md' 1 year ago
CONTRIBUTING.md 84180011c3 first commit 2 years ago
LICENSE.md 84180011c3 first commit 2 years ago
README.md b1ed20d189 Update 'README.md' 7 months ago
package-lock.json 60713dcb4c 1.0.3 1 year ago
package.json 60713dcb4c 1.0.3 1 year ago
webpack.config.js 84180011c3 first commit 2 years ago

README.md

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

License

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