Tabs

To use Tabs, first import SharedModule in your module.

import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}

Basic Tabs

<ngb-tabset [orientation]="orientation">
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="card-body">
        <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
          keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
          cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>
      <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
        <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
          farm-to-table
          craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
          vinyl
          cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
          salvia
          yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
          jean
          shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
          vero
          sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <div class="card-body">
        <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
          facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
          congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
          et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
          faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
          varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
          aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Vertical Tabs

<div class="tabs-container tabs-vertical tabs-right">
  <ngb-tabset [orientation]="orientation">
    <ngb-tab title="Simple">
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
            master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
            keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
            cillum
            iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
          <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
            farm-to-table
            craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
            vinyl
            cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
            salvia
            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
            jean
            shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
            vero
            sint qui sapiente accusamus tattooed echo park.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Disabled" [disabled]="true">
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
            facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
            congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
            et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
            faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
            aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
        </div>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
<div/>

Tabs With Icon

<div class="tabs-container tabs-vertical tabs-right">
  <ngb-tabset orientation="vertical">
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="desktop" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
            stumptown aliqua, retro synth
            master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
            retro
            keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
            salvia
            cillum
            iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="dashboard" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
          squid.
          <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
            artisan four loko
            farm-to-table
            craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
            ullamco ad
            vinyl
            cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica
            VHS
            salvia
            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
            sustainable
            jean
            shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
            butcher
            vero
            sint qui sapiente accusamus tattooed echo park.</p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><gx-icon name="mail" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">
            <strong>A wonderful serenity has taken possession</strong> of my
            entire soul,
            like these sweet mornings of spring which I enjoy with my whole
            heart. I am alone, and feel the charm of existence in this spot,
            which was created for the bliss of souls like mine.
          </p>
          <p class="card-text">
            I am so happy, my dear friend, so absorbed in the exquisite
            sense of mere tranquil existence, that I neglect my talents. I
            should be incapable of drawing a single stroke at the present
            moment; and yet I feel that I never was a greater artist than
            now.
          </p>
        </div>
      </ng-template>
    </ngb-tab>
    <ngb-tab [disabled]="true">
      <ng-template ngbTabTitle><gx-icon name="settings" size="xl"></gx-icon></ng-template>
      <ng-template ngbTabContent>
        <div class="card-body">
          <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh
            elit id diam. Nulla
            facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
            tincidunt eu,
            congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus
            ultrices
            et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu.
            Vivamus
            faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio.
            Orci
            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet
            odio ac lorem
            aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
        </div>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</div>

Pills Tabs

<ngb-tabset type="pills">
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="card-body px-0">
        <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
          stumptown
          aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
          keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
          cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>
      <div class="card-body px-0">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
        squid.
        <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
          artisan
          four loko farm-to-table
          craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
          ad
          vinyl
          cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
          salvia
          yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
          sustainable
          jean
          shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
          butcher
          vero
          sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <div class="card-body px-0">
        <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit
          id
          diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
          tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie
          lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla
          tortor
          arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu
          tincidunt
          odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris
          aliquet
          odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

For more information about options, check the Ng-Bootstrap

PreviousProgress Bar

Last updated 6 years ago

Was this helpful?

<div class="tabs-container tabs-vertical tabs-right"> <ngb-tabset [orientation]="orientation"> <ngb-tab title="Simple"> <ng-template ngbTabContent> <div class="card-body"> <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle><b>Fancy</b> title</ng-template> <ng-template ngbTabContent> <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> </ng-template> </ngb-tab> <ngb-tab title="Disabled" [disabled]="true"> <ng-template ngbTabContent> <div class="card-body"> <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p> </div> </ng-template> </ngb-tab> </ngb-tabset> <div/>

<div class="tabs-container tabs-vertical tabs-right"> <ngb-tabset orientation="vertical"> <ngb-tab> <ng-template ngbTabTitle><gx-icon name="desktop" size="xl"></gx-icon></ng-template> <ng-template ngbTabContent> <div class="card-body"> <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle><gx-icon name="dashboard" size="xl"></gx-icon></ng-template> <ng-template ngbTabContent> <div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle><gx-icon name="mail" size="xl"></gx-icon></ng-template> <ng-template ngbTabContent> <div class="card-body"> <p class="card-text"> <strong>A wonderful serenity has taken possession</strong> of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. </p> <p class="card-text"> I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </p> </div> </ng-template> </ngb-tab> <ngb-tab [disabled]="true"> <ng-template ngbTabTitle><gx-icon name="settings" size="xl"></gx-icon></ng-template> <ng-template ngbTabContent> <div class="card-body"> <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p> </div> </ng-template> </ngb-tab> </ngb-tabset> </div>

<ngb-tabset type="pills"> <ngb-tab title="Simple"> <ng-template ngbTabContent> <div class="card-body px-0"> <p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle><b>Fancy</b> title</ng-template> <ng-template ngbTabContent> <div class="card-body px-0">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. <p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> </ng-template> </ngb-tab> <ngb-tab title="Disabled" [disabled]="true"> <ng-template ngbTabContent> <div class="card-body px-0"> <p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p> </div> </ng-template> </ngb-tab> </ngb-tabset>