shapla-tabs

A simple responsive horizontal navigation tabs component based on Bulma Tabs for Vue.js

Usage no npm install needed!

<script type="module">
  import shaplaTabs from 'https://cdn.skypack.dev/shapla-tabs';
</script>

README

shapla-tabs

npm npm vue2

A simple responsive horizontal navigation tabs component based on Bulma Tabs for Vue.js

Table of contents

Installation

npm i shapla-tabs

Usage

Add the component:

import {tabs,tab} from 'shapla-tabs';

export default {
  name: 'Hello',

  components: {
    tabs,
    tab
  },
}

<tabs fullwidth>
    <tab name="Tab 1" selected>
        Tab One Content
    </tab>
    <tab name="Tab 2">
        Tab Two Content
    </tab>
</tabs>

Props for tabs

Property Type Required Default Description
alignment String no left Possible value can be left, center or right.
size String no default Possible value can be default, small, medium or large.
tabStyle String no default Possible value can be default, boxed, rounded or toggle.
fullwidth Boolean no false If set true, the tabs will take up available full width.

Props for tab

Property Type Required Default Description
name String yes true Tab title.
selected Boolean no false Set true if you to keep open by default.