sliding-tabs

sliding-tabs is a web component buildt with Stencil for slideable tabs or just for a simple slider.

Demo with fixed tabs

Demo with scrollable tabs

Using this component

Script tag

• Put <script src='https://unpkg.com/sliding-tabs@latest/dist/sliding-tabs.js'></script> in the head of your index.html
• Then you can use the component

Node Modules

• Run npm install sliding-tabs --save
• Put a script tag similar to this <script src='node_modules/sliding-tabs/dist/sliding-tabs.js></script> in the head of your index.html
• Then you can use the component

In a stencil-starter app

• Run npm install sliding-tabs --save
• Add { name: 'sliding-tabs' } to your collections
• Then you can use the component

In a Angular or Ionic Project

• Run npm install sliding-tabs --save
• Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components
• Define the custom elements within your app by calling defineCustomElements(window) from main.ts (or some other appropriate place)

Including the Custom Elements Schema

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, SharedModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Defining the Custom Elements

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from 'sliding-tabs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements(window);

Usage

As simple slider

Without the toolbar, you can use this component as a simple slider:

<sliding-tabs>
    <sliding-tabs-content>
      <sliding-tab tab-name="a">Slide A</sliding-tab>
      <sliding-tab tab-name="b">Slide B</sliding-tab>
      <sliding-tab tab-name="c">Slide C</sliding-tab>
    </sliding-tabs-content>
  </sliding-tabs>

With toolbar for tabs

<sliding-tabs>
	<sliding-tabs-content>
		<sliding-tab tab-name="a">Content A</sliding-tab>
		<sliding-tab tab-name="b">Content B</sliding-tab>
		<sliding-tab tab-name="c">Content C</sliding-tab>
	</sliding-tabs-content>
	<sliding-tabs-toolbar>
		<sliding-tabs-button for-tab="a">
		    Button A
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="b">
		    Button B
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="c">
		    Button C
		</sliding-tabs-button>
	</sliding-tabs-toolbar>
</sliding-tabs>

The toolbar can also be placed on top of the content:

<sliding-tabs>
	<sliding-tabs-toolbar>
		<sliding-tabs-button for-tab="a">
		    Button A
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="b">
		    Button B
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="c">
		    Button C
		</sliding-tabs-button>
	</sliding-tabs-toolbar>
	<sliding-tabs-content>
		<sliding-tab tab-name="a">Content A</sliding-tab>
		<sliding-tab tab-name="b">Content B</sliding-tab>
		<sliding-tab tab-name="c">Content C</sliding-tab>
	</sliding-tabs-content>    
</sliding-tabs>

You can add an indicator, which shows the current tab position relative to the buttons:

<sliding-tabs>	
	<sliding-tabs-content>
		<sliding-tab tab-name="a">Content A</sliding-tab>
		<sliding-tab tab-name="b">Content B</sliding-tab>
		<sliding-tab tab-name="c">Content C</sliding-tab>
	</sliding-tabs-content>
	<sliding-tabs-toolbar indicator-placement="top">
		<div class="my-indicator" slot="indicator"></div>
		<sliding-tabs-button for-tab="a">
		    Button A
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="b">
		    Button B
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="c">
		    Button C
		</sliding-tabs-button>
	</sliding-tabs-toolbar>
</sliding-tabs>

There are two more slots you can use for additional buttons:

<sliding-tabs>	
	<sliding-tabs-content>
		<sliding-tab tab-name="a">Content A</sliding-tab>
		<sliding-tab tab-name="b">Content B</sliding-tab>
		<sliding-tab tab-name="c">Content C</sliding-tab>
	</sliding-tabs-content>
	<sliding-tabs-toolbar indicator-placement="top" id="toolbar">
		<div class="my-indicator" slot="indicator"></div>
		<div slot="toolbar-left" class="pager-item" id="previous">&lt;</div>
      	<div slot="toolbar-right" class="pager-item" id="next">&gt;</div>
		<sliding-tabs-button for-tab="a">
		    Button A
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="b">
		    Button B
		</sliding-tabs-button>
		<sliding-tabs-button for-tab="c">
		    Button C
		</sliding-tabs-button>
	</sliding-tabs-toolbar>
</sliding-tabs>

<script>
	var toolbar = document.getElementById('toolbar');
	var previous = document.getElementById('previous');
	var next = document.getElementById('next');

	previous.addEventListener('click', () => toolbar.scrollToLeft());
	next.addEventListener('click', () => toolbar.scrollToRight());
</script>

API

sliding-tabs Element

Parameters

active-tab-index: The index of the active tab.

<sliding-tabs active-tab-index="1">...</sliding-tabs>	

active-tab: The name of the active tab

<sliding-tabs active-tab="c">...</sliding-tabs>

Events

tabChanged: Fires everytime a tab changed. The event contains a property details with the index and name of the current tab:

interface tabChandedEvent {
	index: number;
	name: string;
}

sliding-tabs-content

Parameters

drag-threshold: Number of pixels that must be swiped through before the drag event triggers (default: 20)

<sliding-tabs-content drag-threshold="50">...</sliding-tabs-content>

sliding-tabs-toolbar Element

Parameters

indicator-placement: Possible values are top (place indicator on top of the buttons) and bottom (place indicator to the bottom).

<sliding-tabs-toolbar indicator-placement="bottom">...</sliding-tabs-toolbar>

scrollable: Enables swiping in the toolbar. This is usefull if you have a lot of tabs or buttons with large content.

<sliding-tabs-toolbar scrollable="true">...</sliding-tabs-toolbar>

active-tab-position: The position of the active tab when scrollable="true". Possible values are left, center and right.

<sliding-tabs-toolbar scrollable="true" active-tab-position="center">...</sliding-tabs-toolbar>

Methods on the DOM-Element

async scrollToButton(name: string): Scroll to a specific button (if scrollable="true")

async scrollToLeft(): Scroll the toolbar to the left (previous button).

async scrollToRight(): Scroll the toolbar to the right (next button).

async setActiveTab(): Switch to a specific tab.

Changelog

1.2.5

• Fixed some bugs

1.2.4

• Updated dependencies
• Fixed some bugs

1.2.0

• Added drag-threshold property to sliding-tabs-content
• Only change activeTabIndex if tab exists

1.1.0

• Added active-tab property to scroll-tabs
• Added active-tab-position property to scroll-tabs-toolbar
• Improved performance