代码之家 › 专栏 › 技术社区 › Diego Venâncio

NGX加载黑屏添加标签

angular-cli typescript angular css

-2

Diego Venâncio · 技术社区 · 8 年前

我正在使用 ngx loading >strong>and working very well.

any.component.html

<div class=“my container”> <ngx loading[显示]=“正在加载”[配置]=“”{ 背景边框半径:“14px”, 背景背景色:“rgba(0,0,0,0.87)”, 全屏背景:“真” }“> </NGX加载> </DIV>我想知道是否可以在黑屏上添加标签。如下图所示: . <div class="my-container"> <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px', backdropBackgroundColour: 'rgba(0,0,0,0.87)', fullScreenBackdrop: 'true' }"> </ngx-loading> </div> 我想知道是否可以在黑屏上添加标签。如下图所示:

2 回复 | 直到 8 年前

1

2

user184994 8 年前

你可以很容易地做到这一点,只要在标签上设置z索引,这样它就会显示在黑屏前。

.text {
  z-index: 2000;
  position: absolute;
  color: white;
  left: 0;
  right: 0;
  text-align: center;
  top: calc(50% + 40px);
}

<div class="my-container">
    <ngx-loading [show]="true" [config]="{ 
      backdropBorderRadius: '14px', 
      backdropBackgroundColour: 'rgba(0,0,0,0.87)',
      fullScreenBackdrop: 'true'
      }">
    </ngx-loading>

    <span class="text">Here is some text</span>
</div>

以下是StackBlitz演示: https://stackblitz.com/edit/angular-7wwp3m?file=src%2Fapp%2Fapp.component.html

2

1

windmaomao 8 年前

我认为这个组件不支持文档中的文本。你能做的就是

<div class="spinner" *ngIf="spinnning">add some text</div>

显示/隐藏由 spinning 或从spinner服务传递的变量。

微调器的样式由类控制 spinner .您可以在Internet上找到大量自旋体的实现。前任。 https://www.w3schools.com/howto/howto_css_loader.asp