将百分比文本添加到静态 Ionic 4 进度条答案

【问题标题】：Add a percentage text to a static Ionic 4 progress bar将百分比文本添加到静态 Ionic 4 进度条
【发布时间】：2022-02-23 15:01:35
【问题描述】：

Ionic 进度条的actual version 没有显示百分比文本的选项。

我尝试使用::after 选择器手动添加它，但无济于事。

这是我的 Ionic 代码：

ion-progress-bar {
  height: 18px;
  border-radius: 20px;
}

&lt;ion-progress-bar color="success" value="0.9"&gt;&lt;/ion-progress-bar&gt;

在检查元素时，这是我在 chrome 的元素检查器中得到的

.progress, .progress-indeterminate {
    background: var(--progress-background);
    z-index: 2;
}

.buffer-circles, .indeterminate-bar-primary, .indeterminate-bar-secondary, .progress, .progress-buffer-bar, .progress-buffer-bar:before, .progress-indeterminate {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

<ion-progress-bar _ngcontent-c0="" color="success" value="0.9" ng-reflect-value="0.9" ng-reflect-color="success" role="progressbar" aria-valuenow="0.9" aria-valuemin="0" aria-valuemax="1" class="ion-color ion-color-success progress-bar-determinate hydrated">
  #shadow-root
  <!-- ....... -->
  <div class="progress" style="transform: scaleX(0.9);"></div>
  <div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
</ion-progress-bar>

我可以将元素检查器中的文本添加到进度条的唯一方法是将其添加到带有 progress 类的 div 中：

<div class="progress" style="transform: scaleX(0.9);">90%</div>

但无法从我的 Ionic 代码中添加此文本，因此我尝试使用 ::after 选择器，但它不起作用：

.progress:after{
  content: "90%";
}

我不需要文本动态变化，因为进度条必须显示一个不变的静态值。

谢谢！

【问题讨论】：

标签： css progress-bar ionic4

【解决方案1】：

我认为我试图实现的目标是不可能的，因为它是对 shadow dom 的直接操纵。基于this article，关于shadow dom有几个关键点：

您不能使用 CSS 选择器从 Web 组件外部为 Web 组件的任何内部元素设置样式

如果使用 CSS4 变量，您可以设置 Web 组件的内部元素的样式，因为您可以更改 CSS4 变量的值。

您可以从 Web 组件外部设置 Web 组件内部的插槽内容（即您提供给 Web 组件的内容）的样式

您可以从 Web 组件外部设置 Web 组件的宿主元素（即用于将 Web 组件添加到页面的元素）的样式

由于没有 css4 变量或属性允许我们向进度条添加文本值，我别无选择，只能使用 custom html progress bar：

.progress-outer {
        width: 96%;
        margin: 10px 2%;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        border: 1px solid #dcdcdc;
        color: #fff;
        border-radius: 20px;
}

.progress-inner {
        min-width: 15%;
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 20px;
        background-color: var(--ion-color-primary);
}

<div class="progress-outer">
    <div class="progress-inner">90%</div>
</div>

然后可以通过更改 css 属性来自定义进度条的外观

【讨论】：

【解决方案2】：

你可以放

ion-progress-bar {height:15px;}

在 global.scss .. 如果您还想制作边框半径，那么您也可以在内部添加半径，如

ion-progress-bar {height:15px;border-radius:15px;}

【讨论】：