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

Question

Ionic进度条的实际版本没有显示百分比文本的选项。

我尝试使用::after选择器手动添加它，但没有成功。

这是我的爱奥尼亚密码：

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>

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

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

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

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

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

谢谢！

Answer 1

我认为我试图实现的是不可能的，因为这是对影子dom的直接操作。基于这篇文章，关于阴影dom有几个关键点：

• 不能使用CSS选择器从web组件外部对web组件的任何内部元素进行样式设置
• 如果使用CSS4变量，您可以对web组件的内部元素进行样式设置，因为您可以更改CSS4变量的值
• 您可以从web组件外部设置web组件内部的插入内容(即您已提供给web组件的内容)的样式
• 您可以从web组件外部设置web组件的宿主元素(即用于将web组件添加到页面的元素)的样式

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

.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;}