Question

在mat-progress-bar中，我必须在进度栏中显示文本，而不是其他百分比。有谁能帮助在进度栏中显示文本？

<mat-progress-bar mode="determinate" class="progress-bar" [color]="color " [value]="progress" ></mat-progress-bar>

Answer 1

您可以尝试使用绝对定位的div：

<section class="example-section">
      <mat-progress-bar
          [color]="primary"
          [mode]="mode"
          [value]="value">
      </mat-progress-bar>
            <div style="position: absolute; padding: 10px; color: white;"> {{value}}% </div>
    </section>

您也可以为此组件创建一个CSS类

您还必须更改进度条的高度：

.mat-progress-bar {
  height: 30px;
}

和

.example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 60px;
}

Demo here

Answer 2

您需要手动创建它，因为它在Material 2.x中不可用

解决方案：
您可以将<md-progress-spinner>放在<div>内，并在其中添加另一个<div>以显示文本并手动调整位置。

<div>
<md-progress-spinner [color]="color" 
                     [mode]="mode" 
                     [value]="value" aria-label="Rating" 
                     mode="determinate">
</md-progress-spinner>
<div style="position:relative; top: -60px; left: 30px;">
    {{ showText }}
</div>

希望它能解决您的查询。

工作示例：This can help you, I found on SO only

Answer 3

我认为您无法使用现有的材质进度栏进行配置，您需要通过添加具有以下自定义样式的div来提出自己的实现方式，

<mat-progress-spinner
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value">        
    </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;"> Loading </div>
 </mat-card-content>

STACKBLITZ DEMO

Answer 4

您可以使用CSS执行此操作。这样，您的内容始终位于集中的进度栏中。唯一的条件是width的{{1}}和height与父mat-progress-spinner相同：

div

Answer 5

要插入中心进度栏，请在div中使用以下属性 width: 100%; text-align: center;

<div style="position: absolute; padding: 10px; color: white; width: 100%; text-align: center;">

mat-progress-bar内的文本用角形材料

5 个答案: