Cards
Pages cards
Importing
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(){}How to use
<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);
}API
Callbacks
Last updated