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.
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:
@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 itemtabTitle
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.