<div class="content__title">
|
<h1>
|
Loading Spin
|
</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Basic">
|
<div class="mb-sm">
|
<nz-spin [nzSize]="'small'" class="d-inline-block mr-sm"></nz-spin>
|
<nz-spin class="d-inline-block mr-sm"></nz-spin>
|
<nz-spin [nzSize]="'large'" class="d-inline-block mr-sm"></nz-spin>
|
</div>
|
<div class="mb-sm">
|
<nz-spin [nzTip]="'Loading...'" [nzSpinning]="loading">
|
<nz-alert [nzType]="'info'" [nzMessage]="'Alert message title'" [nzDescription]="'Further details about the context of this alert.'">
|
</nz-alert>
|
</nz-spin>
|
</div>
|
Loading state:
|
<nz-switch [(ngModel)]="loading"></nz-switch>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Table">
|
<ng-template #extra>
|
<button nz-button (click)="load()" [nzType]="'dashed'">
|
<span>Load data</span>
|
</button>
|
</ng-template>
|
<nz-spin [nzTip]="'Loading...'" [nzSpinning]="dataLoading">
|
<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="5">
|
<thead nz-thead>
|
<tr>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Address</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
|
<td nz-td>
|
<a>{{data.name}}</a>
|
</td>
|
<td nz-td>{{data.age}}</td>
|
<td nz-td>{{data.address}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-spin>
|
</nz-card>
|
</div>
|
</div>
|
