WingBlank两翼留白

布局控件

代码演示

基本用法

<WingBlank size='md'>...</WingBlank>

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-wing-blank-basic',
  4. template: `
  5. <div style="padding: 15px 0">
  6. <WingBlank>
  7. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  8. </WingBlank>
  9. <WhiteSpace [size]="'lg'"></WhiteSpace>
  10. <WingBlank [size]="'md'">
  11. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  12. </WingBlank>
  13. <WhiteSpace [size]="'lg'"></WhiteSpace>
  14. <WingBlank [size]="'sm'">
  15. <ng-template [ngTemplateOutlet]="placeHolder"></ng-template>
  16. </WingBlank>
  17. <ng-template #placeHolder>
  18. <div class="placeholder">Block</div>
  19. </ng-template>
  20. </div>
  21. `,
  22. styles: [
  23. `
  24. .placeholder {
  25. background-color: #ebebef;
  26. color: #bbb;
  27. text-align: center;
  28. height: 30px;
  29. line-height: 30px;
  30. width: 100%;
  31. }
  32. `
  33. ]
  34. })
  35. export class DemoWingBlankBasicComponent {}

WingBlank两翼留白 - 图1

API

参数说明类型默认值
[size]两翼留白的间距‘sm’ | ‘md’ | ‘lg’‘lg’