|
1 | | -# vue-tiny-tabs |
| 1 | +# Description |
| 2 | +`vue-tiny-tabs` is a vuejs wrapper for javascript tabbing library (tinytabs)[https://github.com/knadh/tinytabs] |
2 | 3 |
|
3 | | -## Project setup |
4 | | -``` |
5 | | -yarn install |
6 | | -``` |
| 4 | +Find the npm package [`link`](https://www.npmjs.com/package/vue-tiny-tabs) |
7 | 5 |
|
8 | | -### Compiles and hot-reloads for development |
9 | | -``` |
10 | | -yarn run serve |
| 6 | +# Install and basic usage |
| 7 | +```sh |
| 8 | +$ npm install vue-tiny-tabs |
11 | 9 | ``` |
12 | 10 |
|
13 | | -### Compiles and minifies for production |
14 | | -``` |
15 | | -yarn run build |
| 11 | +# Example |
16 | 12 | ``` |
| 13 | +<template> |
| 14 | + <vue-tiny-tabs id="mytabs" :anchor="false" :closable="true" :hideTitle="false" @on-close="onClose" @on-before="onBefore" @on-after="onAfter"> |
| 15 | + <div class="section" id="example"> |
| 16 | + <h3 class="title">Example code</h3> |
| 17 | + <h3>Javascript</h3> |
| 18 | + </div> |
| 19 | + <div class="section" id="options"> |
| 20 | + <h3 class="title">Options table</h3> |
| 21 | + <h3>Options</h3> |
| 22 | + </div> |
| 23 | + <div class="section" id="components"> |
| 24 | + <h3 class="title">Components</h3> |
| 25 | + <h3>Options</h3> |
| 26 | + </div> |
| 27 | + </vue-tiny-tabs> |
| 28 | +</template> |
17 | 29 |
|
18 | | -### Run your tests |
19 | | -``` |
20 | | -yarn run test |
21 | | -``` |
| 30 | +<script> |
| 31 | +import VueTinyTabs from 'vue-tiny-tabs' |
22 | 32 |
|
23 | | -### Lints and fixes files |
24 | | -``` |
25 | | -yarn run lint |
| 33 | +export default { |
| 34 | + name: 'TinyTabs', |
| 35 | + components: { |
| 36 | + 'vue-tiny-tabs' :VueTinyTabs |
| 37 | + }, |
| 38 | + methods: { |
| 39 | + onClose (id) { |
| 40 | + }, |
| 41 | + onBefore (id, tab) { |
| 42 | + }, |
| 43 | + onAfter (id, tab) { |
| 44 | + } |
| 45 | + }, |
| 46 | +} |
| 47 | +</script> |
| 48 | +
|
| 49 | +<!-- Sample css for tab design --> |
| 50 | +<style> |
| 51 | +.tinytabs .tabs { |
| 52 | + margin-left: 15px; |
| 53 | + display: flex; |
| 54 | + flex-flow: row wrap; |
| 55 | +} |
| 56 | +.tinytabs .tabs .tab .close { |
| 57 | + padding-left: 5px; |
| 58 | +} |
| 59 | +.tinytabs .tabs .tab { |
| 60 | + margin: 0 3px 0 0; |
| 61 | + background: #e1e1e1; |
| 62 | + display: block; |
| 63 | + padding: 6px 15px; |
| 64 | + text-decoration: none; |
| 65 | + color: #666; |
| 66 | + font-weight: bold; |
| 67 | + border-radius: 3px 3px 0 0; |
| 68 | +} |
| 69 | +.tinytabs .section { |
| 70 | + background: #f1f1f1; |
| 71 | + overflow: hidden; |
| 72 | + padding: 15px; |
| 73 | + clear: both; |
| 74 | + border-radius: 3px; |
| 75 | +} |
| 76 | +.tinytabs .tab.sel { |
| 77 | + background: #f1f1f1; |
| 78 | + color: #333; |
| 79 | + text-shadow: none; |
| 80 | +} |
| 81 | +
|
| 82 | +</style> |
26 | 83 | ``` |
27 | 84 |
|
28 | | -### Customize configuration |
29 | | -See [Configuration Reference](https://cli.vuejs.org/config/). |
| 85 | +## Options |
| 86 | +| Properties | Description |
| 87 | +|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 88 | +| anchor | true (default) or false. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. | |
| 89 | +| hideTitle | true (default) or falseHide the title element within section elements. | |
| 90 | +| sectionClass | Section element's class. Default is section. | |
| 91 | +| tabsClass | Tab (ul) container's class. Default is tabs. | |
| 92 | +| tabClass | Individual tab's (li) class. Default is tab. | |
| 93 | +| titleClass | Title element's tag. Default is title. | |
| 94 | +| onBefore | function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. | |
| 95 | +| onAfter | function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. | |
| 96 | +| onClose | function(id). Callback function that gets evaluated while closing the tab. The argument is the id of the tab. | |
0 commit comments