Question

我想在点击show（）时向我的应用添加一个微调器，当前页面应该移动到透明视图，只有我的微调器应该突出显示

<button (click)="show()">show</button>
<button (click)="hide()">hide</button>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>

目前我能够显示和隐藏微调器，我需要的是当显示微调器时，我视图中的所有内容都应该移动到透明模式，只显示微调器而不显示其他内容

Answer 1

你可以这样做

<div *ngIf="!isBusy">
    //content
</div>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>

Answer 2

假设您的内容位于某个包装器div中。然后在Busy状态中，你需要向这个div添加一些关闭指针事件并设置较低不透明度的类

<div [class.nonclickable]="isBusy">
    <!-- content -->
</div>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>

造型：

.nonclickable {
    opacity: .3;
    pointer-events: none;
    cursor: not-allowed;
}

如何使屏幕透明？

2 个答案: