Angular 2 Material Progress Spinner：显示为叠加层

发布时间：2020-12-17 07:34:32 所属栏目：安全来源：网络整理

导读：如何将Angular 2 Material Progress Spinner显示为当前视图(页面或模式对话框)的透明覆盖？使用以下代码来实现不透明 HTML div style="height:800px" [class.ops]="show" h2 [class.opaque]="trans"{{name}}/h2 button class="btn btn-success" (click)="to

如何将Angular 2 Material Progress Spinner显示为当前视图(页面或模式对话框)的透明覆盖？

使用以下代码来实现不透明

HTML

<div style="height:800px" [class.ops]="show">
   <h2 [class.opaque]="trans">{{name}}</h2>
   <button class="btn btn-success" (click)="toggleSpinner()"> See spinner </button>
</div>
<spinner [show]="show" [size]="150"> </spinner>

零件

import { Component,Input } from '@angular/core';

@Component({
    selector: 'spinner',template: `
      <div *ngIf="show">
          <span>
           <i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i>
          </span>
      </div>
    `
})
export class SpinnerComponent {
    @Input() size: number = 50;
    @Input() show: boolean;

    toggleSpinner() {
       this.show = !this.show;
       this.trans=!this.trans;
    }

}

CSS

.ops {
  opacity :0;
}

LIVE DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!