sliding-tabs v1.2.5
sliding-tabs
sliding-tabs is a web component buildt with Stencil for slideable tabs or just for a simple slider.
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"><</div>
<div slot="toolbar-right" class="pager-item" id="next">></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 tosliding-tabs-content
- Only change activeTabIndex if tab exists
1.1.0
- Added
active-tab
property toscroll-tabs
- Added
active-tab-position
property toscroll-tabs-toolbar
- Improved performance