Cards
Pages cards
First import it to your app module or any submodule as you wish
import { pgCardModule} from './@pages/components/card/card.module';
@NgModule({
imports: [pgCardModule,...]
})
export class AppModule(){}
HTML
Typescript
<pgcard (onRefresh)="sampleRefresh()" [Loading]="isLoading" [ShowMessage]="errorMessage" [Message]="message">
<ng-template #CardTitle>Sample</ng-template>
<ng-template #CardExtraControls>
<li>
<div class="dropdown" dropdown>
<a href="javascript:void(0);" dropdownToggle role="button" aria-expanded="false">
<i class="card-icon card-icon-settings "></i>
</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu role="menu" aria-labelledby="card-settings">
<a href="javascript:void(0);" class="dropdown-item">API</a>
<a href="javascript:void(0);" class="dropdown-item">Preferences</a>
<a href="javascript:void(0);" class="dropdown-item">About</a>
</div>
</div>
</li>
</ng-template>
<h3>
<span class="semi-bold">Advance</span> Tools</h3>
<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>
<br>
<div>
<div class="profile-img-wrapper m-t-5 inline">
<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">
<div class="chat-status available">
</div>
</div>
<div class="inline m-l-10">
<p class="small hint-text m-t-5">VIA senior product manage
<br>for UI/UX at REVOX</p>
</div>
</div>
</pgcard>
constructor() { }
ngOnInit() {
}
isLoading:boolean=false;
errorMessage:boolean=false;
message:string = "Something went terribly wrong. Just keep calm and carry on!";
sampleRefresh(){
this.isLoading = true;
this.errorMessage = false;
setTimeout(()=>{
this.isLoading = false;
this.errorMessage = true;
},3000);
}
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 |
Method | Description |
onRefresh() | When Refresh button is triggered |
Last modified 4yr ago