Simple Responsive Tabs Component For AngularJs – ngx-tabset

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.
angular-tab-component

Install

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

npm i ngx-tabset --save


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";
...


Basic example

<ngx-tabset>
  <ngx-tab tabTitle="About me">
    Its all about me.
  </ngx-tab>
  <ngx-tab tabTitle="Contacts">
    This is content of the contacts tab
  </ngx-tab>
  <ngx-tab tabTitle="Map" [disabled]="true">
    Content of the Map Tab
  </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
    • [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.


Available SCSS variables

  • $active-tab-color (hex / rgb / rgba) | redModifies the border color of the active tab
  • $default-tab-border (border) | solid 1px transparentModifies tab’s default border style
  • $nav-tab-padding (px / % / …) | 10pxDefines the nav tabs padding
  • $disabled-tab-opacity (0 – 1) | .5The nav tab opacity of disabled tabs
  • $tab-cursor (cursor) | pointerDefines the cursor type for tabs that aren’t disabled or active.
  • $tab-border-transition-duration (duration) | 200msThe animation duration. You can use any duration unit you want

Customization options

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

  • disableStyle (boolean) | falseEnable / 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) | falseOption 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.
  • 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

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by biig-io. Visit their official github repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.