Добавить процентный текст в статический индикатор выполнения 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>

Единственный способ, которым я могу добавить текст из инспектора элементов в индикатор выполнения, - добавить его в div с классом progress.:

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

Но добавить этот текст из моего ионного кода невозможно, поэтому я попытался использовать селектор ::after, но он не работал:

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

Донне нужно, чтобы текст динамически изменялся, поскольку индикатор выполнения должен отображать статическое значение, которое не изменяется.

Спасибо!

Answer 1

Я думаю, что то, чего я пытался достичь, невозможно, поскольку это прямое манипулирование теневым домом. Основываясь на этой статье , есть несколько ключевых моментов относительно теневого домена:

• Вы не можете стилизовать какие-либо внутренние элементы веб-компонента извне веб-компонента с помощью селекторов CSS
• Вы можете стилизовать внутренние элементы веб-компонента, если используются переменные CSS4, так как вы можете изменить значения переменных CSS4.
• Вы можете стилизовать выделенное содержимое внутри веб-компонента (т. Е. Содержимое, предоставленное веб-компоненту) снаружи веб-компонента
• Вы можете стилизовать хост-элемент веб-компонента (т.е. элемент, который вы используете для добавления веб-компонента на страницу) снаружи веб-компонента

Поскольку не существует переменной или свойства 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