Tabs overview

NbTabsetComponent

Dynamic tabset component.

Basic tabset example

<nb-tabset>
 <nb-tab tabTitle="Simple Tab #1">
   Tab content 1
 </nb-tab>
 <nb-tab tabTitle="Simple Tab #2">
   Tab content 2
 </nb-tab>
</nb-tabset>

Installation

Import NbTabsetModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbTabsetModule,
  ],
})
export class PageModule { }

Usage

It is also possible to set a badge to a particular tab:

and we can set it to full a width of a parent component

tabIcon should be used to add an icon to the tab. Icon can also be combined with title. responsive tab property if set allows you to hide the title on smaller screens (tabset-tab-text-hide-breakpoint property) for better responsive behaviour. You can open the following example and make your screen smaller - titles will be hidden in the last tabset in the list:

It is also possible to disable a tab using disabled property:

NbTabComponent

Specific tab container.

<nb-tab tabTitle="Users"
  badgeText="99+"
  badgeStatus="danger">
  <p>List of <strong>users</strong>.</p>
</nb-tab>

NbRouteTabsetComponent

Route tabset components. Renders tabs inside of a router-outlet.

 tabs = [
 {
   title: 'Route tab #1',
   route: '/pages/description',
   icon: 'home',
   responsive: true, // hide title before `tabset-tab-text-hide-breakpoint` value
 },
 {
   title: 'Route tab #2',
   route: '/pages/images',
   }
 ];

 <nb-route-tabset [tabs]="tabs"></nb-route-tabset>

Installation

Import NbRouteTabsetModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbRouteTabsetModule,
  ],
})
export class PageModule { }