README
shapla-tabs
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>
tabs
Props for 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. |
tab
Props for Property | Type | Required | Default | Description |
---|---|---|---|---|
name |
String | yes | true |
Tab title. |
selected |
Boolean | no | false |
Set true if you to keep open by default. |