Drift Angular
Search…
Installation and Setup
Stylesheets
Settings
Tabs
To use Tabs, first import
SharedModule in your module.1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!
Basic Tabs
Preview
HTML
1
<ngb-tabset [orientation]="orientation">
2
<ngb-tab title="Simple">
3
<ng-template ngbTabContent>
4
<div class="card-body">
5
<p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
6
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
7
keffiyeh
8
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
9
cillum
10
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
11
</div>
12
</ng-template>
13
</ngb-tab>
14
<ngb-tab>
15
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
16
<ng-template ngbTabContent>
17
<div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
18
<p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
19
farm-to-table
20
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
21
vinyl
22
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
23
salvia
24
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
25
jean
26
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
27
vero
28
sint qui sapiente accusamus tattooed echo park.</p>
29
</div>
30
</ng-template>
31
</ngb-tab>
32
<ngb-tab title="Disabled" [disabled]="true">
33
<ng-template ngbTabContent>
34
<div class="card-body">
35
<p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
36
facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
37
congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
38
et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
39
faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
40
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
41
aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
42
</div>
43
</ng-template>
44
</ngb-tab>
45
</ngb-tabset>
46
​
Copied!
Vertical Tabs
Preview
HTML
1
<div class="tabs-container tabs-vertical tabs-right">
2
<ngb-tabset [orientation]="orientation">
3
<ngb-tab title="Simple">
4
<ng-template ngbTabContent>
5
<div class="card-body">
6
<p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
7
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
8
keffiyeh
9
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
10
cillum
11
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
12
</div>
13
</ng-template>
14
</ngb-tab>
15
<ngb-tab>
16
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
17
<ng-template ngbTabContent>
18
<div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
19
<p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
20
farm-to-table
21
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
22
vinyl
23
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
24
salvia
25
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable
26
jean
27
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
28
vero
29
sint qui sapiente accusamus tattooed echo park.</p>
30
</div>
31
</ng-template>
32
</ngb-tab>
33
<ngb-tab title="Disabled" [disabled]="true">
34
<ng-template ngbTabContent>
35
<div class="card-body">
36
<p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
37
facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu,
38
congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices
39
et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus
40
faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci
41
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem
42
aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
43
</div>
44
</ng-template>
45
</ngb-tab>
46
</ngb-tabset>
47
<div/>
Copied!
Tabs With Icon
Preview
HTML
1
<div class="tabs-container tabs-vertical tabs-right">
2
<ngb-tabset orientation="vertical">
3
<ngb-tab>
4
<ng-template ngbTabTitle><gx-icon name="desktop" size="xl"></gx-icon></ng-template>
5
<ng-template ngbTabContent>
6
<div class="card-body">
7
<p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
8
stumptown aliqua, retro synth
9
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
10
retro
11
keffiyeh
12
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
13
salvia
14
cillum
15
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
16
</div>
17
</ng-template>
18
</ngb-tab>
19
<ngb-tab>
20
<ng-template ngbTabTitle><gx-icon name="dashboard" size="xl"></gx-icon></ng-template>
21
<ng-template ngbTabContent>
22
<div class="card-body">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
23
squid.
24
<p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
25
artisan four loko
26
farm-to-table
27
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
28
ullamco ad
29
vinyl
30
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica
31
VHS
32
salvia
33
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
34
sustainable
35
jean
36
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
37
butcher
38
vero
39
sint qui sapiente accusamus tattooed echo park.</p>
40
</div>
41
</ng-template>
42
</ngb-tab>
43
<ngb-tab>
44
<ng-template ngbTabTitle><gx-icon name="mail" size="xl"></gx-icon></ng-template>
45
<ng-template ngbTabContent>
46
<div class="card-body">
47
<p class="card-text">
48
<strong>A wonderful serenity has taken possession</strong> of my
49
entire soul,
50
like these sweet mornings of spring which I enjoy with my whole
51
heart. I am alone, and feel the charm of existence in this spot,
52
which was created for the bliss of souls like mine.
53
</p>
54
<p class="card-text">
55
I am so happy, my dear friend, so absorbed in the exquisite
56
sense of mere tranquil existence, that I neglect my talents. I
57
should be incapable of drawing a single stroke at the present
58
moment; and yet I feel that I never was a greater artist than
59
now.
60
</p>
61
</div>
62
</ng-template>
63
</ngb-tab>
64
<ngb-tab [disabled]="true">
65
<ng-template ngbTabTitle><gx-icon name="settings" size="xl"></gx-icon></ng-template>
66
<ng-template ngbTabContent>
67
<div class="card-body">
68
<p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh
69
elit id diam. Nulla
70
facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
71
tincidunt eu,
72
congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus
73
ultrices
74
et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu.
75
Vivamus
76
faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio.
77
Orci
78
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet
79
odio ac lorem
80
aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
81
</div>
82
</ng-template>
83
</ngb-tab>
84
</ngb-tabset>
85
</div>
Copied!
Pills Tabs
Preview
HTML
1
<ngb-tabset type="pills">
2
<ngb-tab title="Simple">
3
<ng-template ngbTabContent>
4
<div class="card-body px-0">
5
<p class="card-text">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
6
stumptown
7
aliqua, retro synth
8
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
9
keffiyeh
10
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia
11
cillum
12
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
13
</div>
14
</ng-template>
15
</ngb-tab>
16
<ngb-tab>
17
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
18
<ng-template ngbTabContent>
19
<div class="card-body px-0">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
20
squid.
21
<p class="card-text">Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
22
artisan
23
four loko farm-to-table
24
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
25
ad
26
vinyl
27
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
28
salvia
29
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
30
sustainable
31
jean
32
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
33
butcher
34
vero
35
sint qui sapiente accusamus tattooed echo park.</p>
36
</div>
37
</ng-template>
38
</ngb-tab>
39
<ngb-tab title="Disabled" [disabled]="true">
40
<ng-template ngbTabContent>
41
<div class="card-body px-0">
42
<p class="card-text">Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit
43
id
44
diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
45
tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie
46
lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla
47
tortor
48
arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu
49
tincidunt
50
odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris
51
aliquet
52
odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
53
</div>
54
</ng-template>
55
</ngb-tab>
56
</ngb-tabset>
Copied!
Last modified 2yr ago
Copy link