WhiteSpace上下留白

布局控件

代码演示

基本用法

上下留白 <WhiteSpace size='md'></WhiteSpace>

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

WhiteSpace 上下留白 - 图1

API

属性说明类型默认值
size上下留白的间距,可选xs,sm,md,lg,xlstringmd