Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Tabs
Importing
First import it to your app module or any submodule as you wish
1
import { pgTabsModule } from '../@pages/components/tabs/tabs.module';
2
@NgModule({
3
imports: [pgTabsModule,...]
4
})
5
export class AppModule(){}
Copied!
How to use
Basic Tabs
Base on Bootstrap tabs, Pages Angular tab components come with different styles, orientation and animations
HTML
1
<pg-tabset tabAnimation="slide-left" Type="simple" ShowPagination="true">
2
<pg-tab>
3
<ng-template #TabHeading>
4
Hello World
5
</ng-template>
6
<div class="row column-seperation">
7
<div class="col-lg-6">
8
<h3>
9
<span class="semi-bold">Sometimes</span> Small things in life means the most
10
</h3>
11
</div>
12
<div class="col-lg-6">
13
<h3 class="semi-bold">great tabs</h3>
14
<p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
15
</div>
16
</div>
17
</pg-tab>
18
<pg-tab>
19
<ng-template #TabHeading>
20
Hello Two
21
</ng-template>
22
<div class="row">
23
<div class="col-lg-12">
24
<h3>“ Nothing is
25
<span class="semi-bold">impossible</span>, the word itself says 'I'm
26
<span class="semi-bold">possible</span>'! ”
27
</h3>
28
<p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
29
<br>
30
<p class="pull-right">
31
<button type="button" class="btn btn-default btn-cons">White</button>
32
<button type="button" class="btn btn-success btn-cons">Success</button>
33
</p>
34
</div>
35
</div>
36
</pg-tab>
37
<pg-tab>
38
<ng-template #TabHeading>
39
Hello Three
40
</ng-template>
41
<div class="row">
42
<div class="col-lg-12">
43
<h3>Follow us & get updated!</h3>
44
<p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
45
<br>
46
</div>
47
</div>
48
</pg-tab>
49
</pg-tabset>
Copied!
Orientations
You can change the "TabPosition" parameter to left or right
HTML
1
<pg-tabset tabAnimation="slide-left" Type="simple" TabPosition="left" extraTabClass="bg-white">
2
<pg-tab>
3
<ng-template #TabHeading>
4
Hello World
5
</ng-template>
6
<div class="row column-seperation">
7
<div class="col-lg-6">
8
<h3>
9
<span class="semi-bold">Sometimes</span> Small things in life means the most
10
</h3>
11
</div>
12
<div class="col-lg-6">
13
<h3 class="semi-bold">great tabs</h3>
14
<p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
15
</div>
16
</div>
17
</pg-tab>
18
<pg-tab>
19
<ng-template #TabHeading>
20
Hello Two
21
</ng-template>
22
<div class="row">
23
<div class="col-lg-12">
24
<h3>“ Nothing is
25
<span class="semi-bold">impossible</span>, the word itself says 'I'm
26
<span class="semi-bold">possible</span>'! ”
27
</h3>
28
<p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
29
<br>
30
<p class="pull-right">
31
<button type="button" class="btn btn-default btn-cons">White</button>
32
<button type="button" class="btn btn-success btn-cons">Success</button>
33
</p>
34
</div>
35
</div>
36
</pg-tab>
37
</pg-tabset>
Copied!
Different Styles
Triangle Tabs
1
<pg-tabset tabAnimation="slide-left" Type="linetriangle" extraTabContentClass="bg-white">
2
<pg-tab>
3
<ng-template #TabHeading>
4
Hello World
5
</ng-template>
6
<div class="row column-seperation">
7
<div class="col-lg-6">
8
<h3>
9
<span class="semi-bold">Sometimes</span> Small things in life means the most
10
</h3>
11
</div>
12
<div class="col-lg-6">
13
<h3 class="semi-bold">great tabs</h3>
14
<p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
15
</div>
16
</div>
17
</pg-tab>
18
<pg-tab>
19
<ng-template #TabHeading>
20
Hello Two
21
</ng-template>
22
<div class="row">
23
<div class="col-lg-12">
24
<h3>“ Nothing is
25
<span class="semi-bold">impossible</span>, the word itself says 'I'm
26
<span class="semi-bold">possible</span>'! ”
27
</h3>
28
<p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
29
<br>
30
<p class="pull-right">
31
<button type="button" class="btn btn-default btn-cons">White</button>
32
<button type="button" class="btn btn-success btn-cons">Success</button>
33
</p>
34
</div>
35
</div>
36
</pg-tab>
37
<pg-tab>
38
<ng-template #TabHeading>
39
Hello Three
40
</ng-template>
41
<div class="row">
42
<div class="col-lg-12">
43
<h3>Follow us & get updated!</h3>
44
<p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
45
<br>
46
</div>
47
</div>
48
</pg-tab>
49
</pg-tabset>
Copied!
Fill In Tabs
1
<pg-tabset tabAnimation="slide-left" Type="fillup" extraTabContentClass="bg-white">
2
<pg-tab>
3
<ng-template #TabHeading>
4
<span>Hello World</span>
5
</ng-template>
6
<div class="row column-seperation">
7
<div class="col-lg-6">
8
<h3>
9
<span class="semi-bold">Sometimes</span> Small things in life means the most
10
</h3>
11
</div>
12
<div class="col-lg-6">
13
<h3 class="semi-bold">great tabs</h3>
14
<p>Native boostrap tabs customized to Pages look and feel, simply changing class name you can change color as well as its animations</p>
15
</div>
16
</div>
17
</pg-tab>
18
<pg-tab>
19
<ng-template #TabHeading>
20
<span>Hello Two</span>
21
</ng-template>
22
<div class="row">
23
<div class="col-lg-12">
24
<h3>“ Nothing is
25
<span class="semi-bold">impossible</span>, the word itself says 'I'm
26
<span class="semi-bold">possible</span>'! ”
27
</h3>
28
<p>A style represents visual customizations on top of a layout. By editing a style, you can use Squarespace's visual interface to customize your...</p>
29
<br>
30
<p class="pull-right">
31
<button type="button" class="btn btn-default btn-cons">White</button>
32
<button type="button" class="btn btn-success btn-cons">Success</button>
33
</p>
34
</div>
35
</div>
36
</pg-tab>
37
<pg-tab>
38
<ng-template #TabHeading>
39
<span>Hello Three</span>
40
</ng-template>
41
<div class="row">
42
<div class="col-lg-12">
43
<h3>Follow us & get updated!</h3>
44
<p>Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.</p>
45
<br>
46
</div>
47
</div>
48
</pg-tab>
49
</pg-tabset>
Copied!
API
Property
Description
Type
Default
tabAnimation
Animation type. Only supports "slide-left"
string
null
Type
Style Type - "fillup" , "linetriangle", "simple"
string
null
TabPosition
Orientation - "left" , "right"
string
null
extraTabClass
Add extra class for tabs wrapper
string
null
Last modified 4yr ago
Copy link