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
Last updated
Was this helpful?