Simple Responsive Tabs Component For AngularJs – ngx-tabset

by

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


  
    Its all about me.
  
  
    This is content of the contacts tab
  
  
    Content of the Map Tab
  • <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) | 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

Customization options

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

  • 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.
  • 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.

Published by Rohit