Skip to content

Commit

Permalink
fix(module:card): fix card loading style (NG-ZORRO#1696)
Browse files Browse the repository at this point in the history
  • Loading branch information
vthinkxie authored Jun 22, 2018
1 parent 4d56352 commit 6083908
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 15 deletions.
7 changes: 6 additions & 1 deletion components/card/demo/loading.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,15 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-card-loading',
template: `
<nz-card style="width:34%;" nzLoading nzTitle="Card title">
<nz-card [nzLoading]="loading" nzTitle="Card title">
Whatever content
</nz-card>
<button nz-button style="margin-top: 16px;" (click)="toggleLoading()">Toggle loading</button>
`
})
export class NzDemoCardLoadingComponent {
loading = true;
toggleLoading(): void {
this.loading = !this.loading;
}
}
66 changes: 53 additions & 13 deletions components/card/nz-card-loading.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,53 @@
<p class="ant-card-loading-block" style="width: 94%;"></p>
<p>
<span class="ant-card-loading-block" style="width: 28%;"></span><span class="ant-card-loading-block" style="width: 62%;"></span>
</p>
<p>
<span class="ant-card-loading-block" style="width: 22%;"></span><span class="ant-card-loading-block" style="width: 66%;"></span>
</p>
<p>
<span class="ant-card-loading-block" style="width: 56%;"></span><span class="ant-card-loading-block" style="width: 39%;"></span>
</p>
<p>
<span class="ant-card-loading-block" style="width: 21%;"></span><span class="ant-card-loading-block" style="width: 15%;"></span><span class="ant-card-loading-block" style="width: 40%;"></span>
</p>
<div class="ant-card-loading-content">
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-22" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-15" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-18" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-13" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-9" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-4" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-3" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-16" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
<div class="ant-card-loading-block"></div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ export class AppModule { }
'@angular/router' : '^6.0.0',
'@angular/animations' : '^6.0.0',
'date-fns' : '^1.29.0',
'ng-zorro-antd' : '1.0.0'
'ng-zorro-antd' : '^1.0.0'
},
tags : [ 'stackblitz', 'sdk' ]
});
Expand Down

0 comments on commit 6083908

Please sign in to comment.