• WingBlank两翼留白
    • 代码演示
    • API

    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,lgstringlg