https://github.com/itzvinoth/vue-tiny-tabs
Vuejs wrapper (size < 3.1kb) for tinytabs library -
https://github.com/itzvinoth/vue-tiny-tabs
tabs vue vue-components vuejs vuejs-wrapper
Last synced: 12 months ago
JSON representation
Vuejs wrapper (size < 3.1kb) for tinytabs library -
- Host: GitHub
- URL: https://github.com/itzvinoth/vue-tiny-tabs
- Owner: itzvinoth
- Created: 2019-08-12T17:45:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T18:24:11.000Z (over 3 years ago)
- Last Synced: 2025-05-25T04:19:59.595Z (about 1 year ago)
- Topics: tabs, vue, vue-components, vuejs, vuejs-wrapper
- Language: JavaScript
- Homepage: https://github.com/knadh/tinytabs
- Size: 3.71 MB
- Stars: 23
- Watchers: 1
- Forks: 5
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Tinytabs
Vuejs wrapper for [`Tinytabs`](https://github.com/knadh/tinytabs) which is a super tiny javascript plugin for rendering tabs (< 2KB).
Documentation and Demo: https://vue-tiny-tabs.netlify.com
Find the npm package [`link`](https://www.npmjs.com/package/vue-tiny-tabs)
# Install and basic usage
```sh
$ npm install vue-tiny-tabs
```
# Example
```vue
Example code
Javascript
Options table
Options
Components
Options
import VueTinyTabs from 'vue-tiny-tabs'
export default {
name: 'TinyTabs',
components: {
'vue-tiny-tabs': VueTinyTabs
},
methods: {
onClose (id) {
console.log('Callback function that gets evaluated while closing the tab', id)
},
onBefore (id, tab) {
console.log('Callback function that gets evaluated before a tab is activated', id, tab)
},
onAfter (id, tab) {
console.log('Callback function that gets evaluated after a tab is activated', id, tab)
}
},
}
```
### Customized CSS for styling
```css
.tinytabs .tabs {
margin-left: 15px;
display: flex;
flex-flow: row wrap;
}
.tinytabs .tabs .tab .close {
padding-left: 5px;
}
.tinytabs .tabs .tab {
margin: 0 3px 0 0;
background: #e1e1e1;
display: block;
padding: 6px 15px;
text-decoration: none;
color: #666;
font-weight: bold;
border-radius: 3px 3px 0 0;
}
.tinytabs .section {
background: #f1f1f1;
overflow: hidden;
padding: 15px;
clear: both;
border-radius: 3px;
}
.tinytabs .tab.sel {
background: #f1f1f1;
color: #333;
text-shadow: none;
}
```
## Options
| Properties | Description
|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| anchor | false (default) or true. 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. |
| hideTitle | false (default) or true. Hide the title element within section elements. |
| sectionClass | Section element's class. Default is section. |
| tabsClass | Tab (ul) container's class. Default is tabs. |
| tabClass | Individual tab's (li) class. Default is tab. |
| titleClass | Title element's tag. Default is title. |
| 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. |
| 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. |
| onClose | function(id). Callback function that gets evaluated while closing the tab. The argument is the id of the tab. |
Please find out tinytabs wrapper for [`Reactjs`](https://github.com/mevinoth/r-tiny-tabs)
MIT License.