Pages UI
Search…
Cards
Pages cards

Importing

First import it to your app module or any submodule as you wish
1
import { pgCardModule} from './@pages/components/card/card.module';
2
@NgModule({
3
imports: [pgCardModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

HTML
Typescript
1
<pgcard (onRefresh)="sampleRefresh()" [Loading]="isLoading" [ShowMessage]="errorMessage" [Message]="message">
2
<ng-template #CardTitle>Sample</ng-template>
3
<ng-template #CardExtraControls>
4
<li>
5
<div class="dropdown" dropdown>
6
<a href="javascript:void(0);" dropdownToggle role="button" aria-expanded="false">
7
<i class="card-icon card-icon-settings "></i>
8
</a>
9
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu role="menu" aria-labelledby="card-settings">
10
<a href="javascript:void(0);" class="dropdown-item">API</a>
11
<a href="javascript:void(0);" class="dropdown-item">Preferences</a>
12
<a href="javascript:void(0);" class="dropdown-item">About</a>
13
</div>
14
</div>
15
</li>
16
</ng-template>
17
<h3>
18
<span class="semi-bold">Advance</span> Tools</h3>
19
<p>We have crafted Pages Cards to suit any use case. Add a maximize button <i class="pg-fullscreen"></i> into your Cards controls bar to make the Cards go full-screen. This will come handy if you want to show lot of content inside a Cards and want to give the content some room to breath</p>
20
<br>
21
<div>
22
<div class="profile-img-wrapper m-t-5 inline">
23
<img width="35" height="35" src2x="assets/img/profiles/avatar_small2x.jpg" pgRetina src1x="assets/img/profiles/avatar_small.jpg" alt="" src="assets/img/profiles/avatar_small2x.jpg">
24
<div class="chat-status available">
25
</div>
26
</div>
27
<div class="inline m-l-10">
28
<p class="small hint-text m-t-5">VIA senior product manage
29
<br>for UI/UX at REVOX</p>
30
</div>
31
</div>
32
</pgcard>
Copied!
1
constructor() { }
2
3
ngOnInit() {
4
}
5
isLoading:boolean=false;
6
errorMessage:boolean=false;
7
message:string = "Something went terribly wrong. Just keep calm and carry on!";
8
9
sampleRefresh(){
10
this.isLoading = true;
11
this.errorMessage = false;
12
setTimeout(()=>{
13
this.isLoading = false;
14
this.errorMessage = true;
15
},3000);
16
}
Copied!

API

Property
Description
Type
Default
Loading
To show loading Progress Bar with overlay
boolean
false
ShowMessage
Show message once load is failed
boolean
false
Message
Error message you want to show
string
null
Maximize
Show Maximize button
boolean
true
Refresh
Show Refresh button
boolean
true
Toggle
Show Collapse toggle button
boolean
true
Maximize
Show maximize button
boolean
true
ProgressType
Type of progress bar - circle , bar
boolean
circle
ProgressColor
Color of the progress bar
string
success, danger, warning and primary
MinimalHeader
No controls. A simple circular refresh button
boolean
false
HeaderClass
Add extra header class to the card
string
null
Type
Class of card, transparent, default or with bg-color
string
default

Callbacks

Method
Description
onRefresh()
When Refresh button is triggered