add loading buttons

This commit is contained in:
Çetin 2021-12-24 16:44:50 +03:00
parent 9c9ee37ae1
commit 3040734719
2 changed files with 15 additions and 0 deletions

View File

@ -135,5 +135,13 @@
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
</div>
<div class="card">
<h5>Loading</h5>
<p-button label="Search" icon="pi pi-search" class="mr-2 mb-2" [loading]="loading[0]" (onClick)="load(0)"></p-button>
<p-button label="Search" icon="pi pi-search" iconPos="right" class="mr-2 mb-2" [loading]="loading[1]" (onClick)="load(1)"></p-button>
<p-button icon="pi pi-search" class="mr-2 mb-2" [loading]="loading[2]" (onClick)="load(2)"></p-button>
<p-button label="Search" class="mr-2 mb-2" [loading]="loading[3]" (onClick)="load(3)"></p-button>
</div>
</div>
</div>

View File

@ -8,6 +8,8 @@ export class ButtonDemoComponent implements OnInit {
items: MenuItem[];
loading = [false, false, false, false]
ngOnInit() {
this.items = [
{label: 'Update', icon: 'pi pi-refresh'},
@ -17,4 +19,9 @@ export class ButtonDemoComponent implements OnInit {
{label: 'Setup', icon: 'pi pi-cog'}
];
}
load(index) {
this.loading[index] = true;
setTimeout(() => this.loading[index] = false, 1000);
}
}