SimpleTabsVue

Just a very simple Tab Plugin for Vue. Basically no styling. Just pure utility.

Table of Contents

• SimpleTabsVue
  • Table of Contents
  • Usage
    • Usage Example
    • Switching Programmatically
    • Filter
      • List of available filter options
    • Multiple Tab Names
  • Customizing
    • Styling Classes
    • Adding Custom Classes

Usage

First you have to install the package:

npm install simple-tabs-vue

You can define the components globaly as follows:

import { SimpleTabsPlugin } from 'simple-tabs-vue';
// import "simple-tabs-vue/styles.css"; // for testing

const app = createApp(App);
app.use(SimpleTabsPlugin);
app.mount('#app');

There is styling but it is really just meant for testing purposes. Just implement your own cool styling.

Usage Example

<SimpleTabSwitch groupName="TabGroup" defaultTab="Tab2" />
<SimpleTab tabGroup="TabGroup" tabName="Tab1">Tab1</SimpleTab>
<SimpleTab tabGroup="TabGroup" tabName="Tab2">Tab2</SimpleTab>

It is up to you where to place those components. There is no defined order you have to follow.

SimpleTabSwitch displays the buttons to switch between tabs. Optionaly defaultTab can be provided with the tab to open as default. Each SimpleTab element needs a tabGroup to which it is grouped. The tabName is the identifier of the tab.

SimpleTabSwitch can emit the events beforeSwitchTab and afterSwitchTab which return the previous and subsequent tab. There is also the possibility to provide the callback onBeforeSwitch that is called before the switch actually happening. When returning false the switch event will abort.

Switching Programmatically

You can also call to switch the tab in code. Just use the tab store and call the switchTab method.

...
import { useSimpleTabsStore } from './composable/tabStore';
const tabsStore = useSimpleTabsStore();

function switchToTab2(){
    tabsStore.switchTab('TabGroup', 'Tab2');
}
...

Filter

The tab Store also provides a filter:

// opens all tabs where the tab Name starts with 'Book'
tabsStore.filterTabs('TabGroup', 'Book', FilterOption.StartsWith);

List of available filter options

• FilterOption.StartsWith - Start with provided string.
• FilterOption.EndWith - Ends with provided string.
• FilterOption.Contains - Contains provided string.
• FilterOption.Regex - Filter with provided regex string.

Multiple Tab Names

You can also provide multiple tab names to a tab:

<SimpleTab tab-group="TabGroup" :tab-name="['Tab1', 'Tab2']">
    Open On 'Tab1' and 'Tab2' but not on any other Tab.
</SimpleTab>

This is very usefull when you want a tab to be shown when 'Tab1' or 'Tab2' are open but not for example 'Tab3'.

Customizing

Styling Classes

• simpleT-tabSwitcher -> container for tab selection
• simpleT-tabSwitchBtn -> Tab Selection Button
• simpleT-tabOpened -> added class to tab Button when tab is open
• simpleT-tabClosed -> added class to tab Button when tab is closed
• simpleT-tab -> tab class

Adding Custom Classes

You can provide custom css classes for specific elements:

...
<!-- This Elements have custom css classes added  -->
<SimpleTabSwitch :customBtnOpenClasses="['myBtnOpen']" :customBtnClasses="['myBtn']" :containerClasses="['mySwitchContainer']" groupName="TabGroup" defaultTab="Tab2" />
<SimpleTab tab-group="TabGroup" :tab-name="['Tab1']" :classes=['myTab']">
    Tab1
</SimpleTab>
...