BETA
Sort by:
Sorting

All pages will be filtered by your selected preferences

Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)
Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)

vue-tiny-tabs

Vuejs wrapper (size < 3.1kb) for tinytabs library -


24
13
5 months ago
161

Vue Tinytabs

Vuejs wrapper for Tinytabs which is a super tiny javascript plugin for rendering tabs (< 2KB).

Documentation and Demo: https://vue-tiny-tabs.netlify.com

vtt

Find the npm package link

Install and basic usage

$ npm install vue-tiny-tabs

Example

<template>
	<vue-tiny-tabs id="mytabs" :anchor="false" :closable="true" :hideTitle="false" @on-close="onClose" @on-before="onBefore" @on-after="onAfter">
		<div class="section" id="example">
			<h3 class="title">Example code</h3>
			<h3>Javascript</h3>
		</div>
		<div class="section" id="options">
			<h3 class="title">Options table</h3>
			<h3>Options</h3>
		</div>
		<div class="section" id="components">
			<h3 class="title">Components</h3>
			<h3>Options</h3>
		</div>
	</vue-tiny-tabs>
</template>

<script>
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)
		}
	},
}
</script>

Customized CSS for styling

.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

PropertiesDescription
anchorfalse (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.
hideTitlefalse (default) or true. Hide the title element within section elements.
sectionClassSection element's class. Default is section.
tabsClassTab (ul) container's class. Default is tabs.
tabClassIndividual tab's (li) class. Default is tab.
titleClassTitle element's tag. Default is title.
onBeforefunction(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.
onAfterfunction(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.
onClosefunction(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

MIT License.