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

Question

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

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

这是我的 Ionic 代码：

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

<ion-progress-bar color="success" value="0.9"></ion-progress-bar>

在检查元素时，这是我在 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>

我可以将元素检查器中的文本添加到进度条的唯一方法是将其添加到 div 和 progress class:

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

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

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

我不需要动态更改文本，因为进度条必须显示不会更改的静态值。

谢谢！

Answer 1

我认为我试图实现的目标是不可能的，因为它是对阴影的直接操纵 dom。基于this article，关于shadow的一些关键点dom:

You cannot style any of the internal elements of a web component from outside of the web component using CSS selectors

You can style the internal elements of a web component if CSS4 variables are being used, as you can change the values of the CSS4 variables.

You can style slotted content inside of a web component (i.e. content you have supplied to the web component) from outside of the web component

You can style the host element of the web component (i.e. the element you use to add the web component to a page) from outside of the web component

由于没有 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 属性来自定义进度条的外观

Answer 2

你可以简单地把

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

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

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

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

Add a percentage text to a static Ionic 4 progress bar

css

progress-bar

ionic4