First complete material tab swiper that works as a web component, which means that it can be embedded into React, Angular, Vue, Ember and most importantly, simple VanillaJS extremely easily.

The API to use this is very straightforward. Default tab background and highlighter has a color. But you can change them easily according to your need with input. The tabs' minimum width is (container-width / number of tabs), but they can be as wide as they require. They don't have to be the same width. The highlighter animation will work in its own way.

This component is made with Stencil, a fast, robust, easy to use web-component generation tool.

Demo

Please visit this link to see a working demo of Material Tab Swiper.

Installation

NPM: npm i mat-tab-swiper
CDN: <script src="https://unpkg.com/mat-tab-swiper/dist/mattabswiper.js"></script>

Framework Integration

React

Install the component with npm i mat-tab-swiper. In your 'index.js' file, you have to do the following:

import { applyPolyfills, defineCustomElements } from 'mat-tab-swiper/loader';
...
applyPolyfills().then(() => {
  defineCustomElements();
});

Angular

Install the component with npm i mat-tab-swiper. For angular you have to do the following in app.module.ts

import { applyPolyfills, defineCustomElements } from 'mat-tab-swiper/loader';
...
applyPolyfills().then(() => {
  defineCustomElements();
});

Then you can import 'CUSTOM_ELEMENTS_SCHEMA' like following in your lazy loaded module where you will use it.
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
Then you need to add it to 'schemas' array inside NgModule like following

@NgModule({
  declarations: [...],
  imports: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Then you are ready to use it as an angular custom element

Vue

Install the component with npm i mat-tab-swiper
Then do the following in 'main.js' file

import { applyPolyfills, defineCustomElements } from 'test-components/loader';
...
applyPolyfills().then(() => {
  defineCustomElements();
});

Now the 'mat-tab-swiper' should be available to use in any component.

Ember

It is really easy to integrate with Ember. Ember even has an add-on to integrate with Stencil components. Go to this page to know how to integrate with Ember.

Javascript

Getting started in VanillaJS is very easy. Just add the script tag at top and get started.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper</title>
    <script src="https://unpkg.com/mat-tab-swiper/dist/mattabswiper.js"></script>
</head>

<body>

    <mat-tab-swiper>
        <mat-swiper tab="Tab1">
            ...
        </mat-swiper>
        <mat-swiper tab="Tab2">
            ...
        </mat-swiper>
        <mat-swiper tab="Tab3">
            ...
        </mat-swiper>
    </mat-tab-swiper>

</body>

</html>

For more on this, please read in detail about how to integrate web-components in your framework.

How To Use

After you install it with npm i mat-tab-swiper or use script tag like,<script src="https://unpkg.com/mat-tab-swiper/dist/mattabswiper.js"></script>, just add the following html to get your tabswiper up and running.

<mat-tab-swiper>
    <mat-swiper tab="Tab1">
        ...
    </mat-swiper>
    <mat-swiper tab="Tab2">
        ...
    </mat-swiper>
    <mat-swiper tab="Tab3">
        ...
    </mat-swiper>
</mat-tab-swiper>

You are done!!

The tabswiper has a few inputs and events to help you out with your custom needs be it css or functional. Following shows the advanced use in various frameworks.

React

You can pass the inputs to this component exactly the way you do in any other component. But to access events, you assign eventlistener to the element like following.

<mat-tab-swiper ref={(ref)=> this.tabSwiperRef = ref}>
    <mat-swiper tab="Tab1">
        ...
    </mat-swiper>
    <mat-swiper tab="Tab2">
        ...
    </mat-swiper>
    <mat-swiper tab="Tab3">
        ...
    </mat-swiper>
</mat-tab-swiper>

...

componentDidMount() {
    this.tabSwiperRef.addEventListener('slidemove', (e) => {
        // 'slidemove' gives the moving direction as output
    })
}

Angular

The input and output event work exactly the same way it does in normal angular component. If you want to access the element in the ts file, use '@ViewChild' as ElementRef.

Vue

If you want to access the TabSwiper's element, you can use 'ref'. For passing input data and accessing output events, it works in the exact way as any other custom components.

Javascript

For VanillaJS, you can pass input and access event in following way.

let matTabSwiper = document.querySelector('mat-tab-swiper')

The default initial slide index is 0 but you can also initialize with an input property 'activeIndex', matTabSwiper.activeIndex = 1

You can pass tab's css properties the same way. The input's name is 'tabCssProperties'. It has an interface as,

{
    background: string
    highlighterBackground: string
    textColor: string
}

You can pass the properties the same way,

matTabSwiper.tabCssProperties = {
    background: '#fc3535',
    highlighterBackground: '#000',
    textColor: '#000'
}

The events are simple js events. So, you can access events in normal js way. The below code shows accessing 'slidechanged' event.

matTabSwiper.addEventListener('slidechanged', (e) => {
    // e.detail.index is a valid slide index
})

Input Properties

activeIndex

Active slide index as initial slide. It takes a valid number as slide index. Defaults to 0.

sliderSpeed

Slider animation speed in ms. Speed for slide and tab transition is denoted by this. It takes a number. Default is 300.

tabCssProperties

Css properties for tabs container. It has an interface as following,

{
    background: string
    highlighterBackground: string
    textColor: string
}

Defaults to,

{
    background: '#bad97d',
    highlighterBackground: '#000',
    textColor: '#000'
}

Events

All the events are js events. So you can access value through 'event.detail' if value is provided with event.

slidechanged

Fires after slide changed. It also emits the slide index. The index of the slide can be accessed through 'event.detail.index'

transitionend

Fired after transition ends

tabclicked

Fires when a tab is clicked. The index of the tab can be accessed through 'event.detail.index'

slidevisited

Fires when a slide changes. It shows whether the tab is already visited or not. You can make use of it if you are doing differential loading. If you are looking for 'Tab1', 'event.detail.Tab1' returns boolean. It also gives 'currentTab' property which you can access through 'event.detail.currentTab'. Visit Differential Loading section of this page to read in detail.

slidemove

Fired when slide moves, emits direction as 'right' or 'left'. You can access it through 'event.detail.direction'.

receiveswiper

Fires when 'swiper' object is fired. You can use this to manipulate swiper's behaviour. Visit SwiperJS for detailed API.

receiveswiperelement

Fires the swiper-wrapper html-element when ready

receivetabelement

Fires the tab-container html-element when ready

If you want to manipulate the tabs, you can do it through the 'receivetabelement' event by accessing the tab elements. It is using shadowdom so you can not easily access it through normal js. You can do it this way,

let matTabSwiper = document.querySelector('mat-tab-swiper')
matTabSwiper.addEventListener('receivetabelement', (e) => {
    let tabContainer = e.detail
    // If you want to change the fontsize of the tabs, the class of each tab is 'inner-tab'
    let tabs = tabContainer.querySelectorAll('.inner-tab')
    tabs.forEach(element => {
      element.style.fontSize = '20px'
    });
})

Methods

You have to access the element in your framework in order to call any methods.
let matTabSwiper = document.querySelector('mat-tab-swiper')

Use 'ref' for React and Vue and 'Viewchild' for Angular

slideNext

Slides to next slide. Takes no argument.

slidePrevious

Slides to preveious slide. Takes no argument.

slideTo

Slides to the index passed. Suppose you want to slide to 3rd slide. You have to call
matTabSwiper.slideTo(2)

lockSwipe

For locking and unlocking the swipe. Takes a boolean. If you want to lock, you have to pass true. Or false if you want to unlock.
EG: matTabSwiper.lockSwipe(true)

lockNextSwipe

For locking and unlocking the swipe to go to next slide. Takes a boolean. If you want to lock, you have to pass true. Or false if you want to unlock.

lockPrevSwipe

For locking and unlocking the swipe to go to preveious slide. Takes a boolean. If you want to lock, you have to pass true. Or false if you want to unlock.

Differential Loading

Differential loading here means that you load the content inside specific 'mat-swiper' if that slide is at all visited once by the user. Otherwise you end up calling unnecessary API's that user need not see content of and DOM loads unnecesary contents which resides in another slide which user did not visit.

This is not done by default, however you can make use of 'slidevisited' EventListener to achieve this. You can check whether the current swiper if at all visited atleast once. If not visited once, then content inside can be loaded and then thereafter it maintains the state be it the scroll position or other things for succeeding visits. The 'slidevisited' event holds the given tab names as properties and values as boolean whether they have been visited already. It also gives 'currentTab' property which provides the active swipe's tab name.

For a swiper with tab name "Tab1", you can load the content inside it in the following manner.

Suppose you have a variable 'slideVisitedObject' which stores last event data emitted by 'slidevisited' event.

If you are using templating mechanism that conditionally renders content, like simple 'if' for React or '*ngIf' for Angular or 'v-if' for Vue, you can do it in following way:

let matTabSwiper = document.querySelector('mat-tab-swiper')
matTabSwiper.addEventListener('slidevisited', (e) => {
    this.slideVisitedObject = e.detail
})

<mat-swiper tab='Tab1'>
    { if (this.slideVisitedObject.currentTab == 'Tab1' || this.slideVisitedObject['Tab1']) == true } // React

    *ngIf="this.slideVisitedObject.currentTab == 'Tab1' || this.slideVisitedObject['Tab1']) == true" // Angular

    v-if="this.slideVisitedObject.currentTab == 'Tab1' || this.slideVisitedObject['Tab1']) == true" // Vue
</mat-swiper>

*** Do not put the condition on 'mat-swiper' element itself.

If you are using Vanilla JS or DOM manipulation in any framework where you inject the content later, you do the following way:

<mat-tab-swiper>
    <mat-swiper tab="Tab1">
    
    </mat-swiper>
    <mat-swiper tab="Tab2">
    
    </mat-swiper>
    <mat-swiper tab="Tab3">
    
    </mat-swiper>
</mat-tab-swiper>

let matTabSwiper = document.querySelector('mat-tab-swiper')
matTabSwiper.addEventListener('slidevisited', (e) => {
    let slideVisitedObject = e.detail
    if(!slideVisitedObject[slideVisitedObject.currentTab]) { // Truthy checking
        let currentTab = document.querySelector([tab="Tab1"])
        currentTab.innerHTML = <Your Content>
    }
})

For a particular slide, !slideVisitedObject[slideVisitedObject.currentTab] condition will yield only once in its entire lifecycle. So the above code ensures that a tab which is in focus currently but not visited yet once gets loaded and stays in the DOM for succeeding visits without further loading.

Further help

For further help contact juny.ss91@gmail.com if you need help with integration.

Keywords

FAQs

What is mat-tab-swiper?

Is mat-tab-swiper well maintained?

Package last updated on 27 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

mat-tab-swiper

Material Tab Swiper

Demo

Installation

Framework Integration

React

Angular

Vue

Ember

Javascript

How To Use

React

Angular

Vue

Javascript

Input Properties

activeIndex

sliderSpeed

tabCssProperties

Events

slidechanged

transitionend

tabclicked

slidevisited

slidemove

receiveswiper

receiveswiperelement

receivetabelement

Methods

slideNext

slidePrevious

slideTo

lockSwipe

lockNextSwipe

lockPrevSwipe

Differential Loading

Further help

Keywords

Related posts

Engineering with AI Podcast: The Promise of AI-First Development

Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations