ngx-tabset is a very simple library to let you create some tabs. It uses flex-box and is compatible with Angular >=2.0.0.

Demo

https://maximelafarie.com/ngx-tabset/

This library doesn't use any framework (no CSS library, no JQuery...)

Setup

To use ngx-tabset in your project install it via npm / yarn:

npm i ngx-tabset --save

or

yarn add ngx-tabset

If you are using system.js you may want to add this into your config:

System.config({
    "map": {
        "ngx-tabset": "node_modules/ngx-tabset/bundles/ngx-tabset.umd.js"
    }
});

Usage

Import TabsModule in your app module and start using it in any component:

import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {TabsModule} from 'ngx-tabset';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    TabsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

And import ngx-tabset.scss or ngx-tabset.css in a global style file (e.g. styles.scss or styles.css in classic Angular projects or any other scss/css file it imports): Example with styles.scss:

/* You can add global styles to this file, and also import other style files */
@import "~ngx-tabset/ngx-tabset";
@import "app/app.component";
...

Demo example here

Basic example

<ngx-tabset customNavClass="nav-test-class" customTabsClass="container">
  <ngx-tab tabTitle="About me" tabSubTitle="a little subtitle">
    Its all about me.
  </ngx-tab>
  <ngx-tab tabTitle="Contacts" tabSubTitle="my contacts" [bypassDOM]="true">
    <ng-template>
      This is content of the contacts tab
    </ng-template>
  </ngx-tab>
  <ngx-tab tabTitle="Map" tabSubTitle="i'm disabled" [disabled]="true">
    Content of the Map Tab
  </ngx-tab>
</ngx-tabset>

Content projection example

<ngx-tabset [disableStyle]="true" (onSelect)="doSomethingOnTabSelect($event)">
    <ngx-tab tabTitle="Tab title" [active]="true" [bypassDOM]="true">
        <ng-template>
          <app-my-component></app-my-component>
        </ng-template>
    </ngx-tab>
    ...
</ngx-tabset>

• <ngx-tabset> is a container for all tabs
  • [disableStyle]="true|false" Disables/enables the built-in style. It allows you to style the entire tab yourself
  • (onSelect)="doSomethingOnTabSelect($event)" Callback to be called when tab is being selected. It returns the index of the selected tab into tabset collection.
• <ngx-tab> is a single tab item
  • tabTitle The tab title
  • tabSubTitle The tab subtitle
  • [disabled]="true|false Indicates if current tab is enabled or disabled
  • [active]="true|false" Specifies which tab should be active on init. By default the first tab will be active.

Style

⚠️ For ngx-tabset >= 2.0.0 only! ngx-tabset provides built-in SCSS variables that you can override easily like it (assuming you imported ngx-tabset.scss as explained above):

/* You can add global styles to this file, and also import other style files */
/* NgxTabset variables override */
$active-tab-color: rgba(0, 0, 0, .7);
$nav-tab-padding: 20px;

@import "~ngx-tabset/ngx-tabset";
...

Available SCSS variables

The below documentation will use the following pattern:

parameter/option name (type) | default value | description

• $active-tab-color (hex / rgb / rgba) | red ― Modifies the border color of the active tab

• $default-tab-border (border) | solid 1px transparent ― Modifies tab's default border style

• $nav-tab-padding (px / % / ...) | 10px ― Defines the nav tabs padding

• $disabled-tab-opacity (0 - 1) | .5 ― The nav tab opacity of disabled tabs

• $tab-cursor (cursor) | pointer ― Defines the cursor type for tabs that aren't disabled or active.

• $tab-border-transition-duration (duration) | 200ms ― The animation duration. You can use any duration unit you want

• $tab-border-transition-timing-function (transition-timing-function Property) | ease-in-out ― Specifies the speed curve of the transition effect (available speed curves here)

Customization options

ngx-tabset comes with several options in order to facilitate integration (with CSS frameworks, custom style, etc.).

The below documentation will use the following pattern:

parameter/option name (type) | default value | required? ― description

• disableStyle (boolean) | false ― Enable / disable default tabset style. E.g.: it's useful if you want to keep the provided style on some tabs and disable it on others

• bypassDOM (boolean) | false ― Option to allow the tab to trigger lifecycle events to the wrapped content, e.g. for wrapped components. You need to surround tab content with <ng-template>...</ng-template> in order to make it work. Please check the above example for full implementation

• customNavClass (string) | '' ― All the additionnal classes you want to add to the tabset header / nav. You can add several classes by giving a string with space-separated classnames

• customTabsClass (string) | '' ― All the additionnal classes you want to add to the tabset container. You can add several classes by giving a string with space-separated classnames

• customPaneClass (string) | '' ― All the additionnal classes you want to add to each tab pane. You can add several classes by giving a string with space-separated classnames

Issues

If you wish to submit an issue, please use the available template to facilitate reading and comprehension of all issues encountered. You can find this template in ./github/issue_template.md.