如何在垫子进度条中将分数放在百分比的中间

Question

您好，我正在尝试实现以下垫子进度条，其中分数将显示在百分比的顶部。

目前我的代码，我可以在百分比的开头显示分数。这是我的代码：

       <div class="card-body">
            <span id="advance-details" #advancedetails class="progress">{{ CurrentAmount }}
              <span >/ {{ OriginalAmount }}</span></span>
            <mat-progress-bar id="advance-meter" #advancemeter class="meter" color="primary" mode="determinate" [hidden]="!repaymentPercentage"  value="{{ repaymentPercentage }}"></mat-progress-bar>
            <div id="advance-progress" #advanceprogress class="meter-percentage"> {{ repaymentPercentage }}% </div>
        </div>

对应的打字稿代码是：

setProgressBarElementsPosition() {

document.getElementById('advance-details')!.style.left = this.repaymentPercentage + "%";
document.getElementById('advance-progress')!.style.left = this.repaymentPercentage + "%";

let widthAdvanceDetails = document.getElementById('advance-details')?.getBoundingClientRect().width;
let positionAdvanceDetails = document.getElementById('advance-details')?.getBoundingClientRect().x;

let widthMeter = document.getElementById('advance-meter')?.getBoundingClientRect().width;
let positionMeter = document.getElementById('advance-meter')?.getBoundingClientRect().x;
let positionMeterEnd = positionMeter! + widthMeter!;

let widthPercentage = document.getElementById('advance-progress')?.getBoundingClientRect().width;
let positionPercentage = document.getElementById('advance-progress')?.getBoundingClientRect().x;

if (positionAdvanceDetails! + widthAdvanceDetails! > positionMeterEnd) {
  document.getElementById('advance-details')!.style.left = positionMeterEnd - positionMeter! - widthAdvanceDetails! + "px";
} else {
  document.getElementById('advance-details')!.style.left = this.repaymentPercentage + '%';
}
if (positionPercentage! + widthPercentage! > positionMeterEnd) {
  document.getElementById('advance-progress')!.style.left = positionMeterEnd - positionMeter! - widthPercentage! + "px";
} else {
  document.getElementById('advance-progress')!.style.left = this.repaymentPercentage + '%';
}
}

我得到的输出如下图所示：

所以我希望这个 11.00/11.00 分数值应该在进度百分比的中间。我怎样才能做到这一点？

Answer 1

根据您的图像和示例图像判断，您希望分数位于 % 数字上方，居中并随 % 变化移动。

我会使用 self.offsetWidth / 2 之类的东西来找到元素的中心并使用它......不知何故。如何将其实施到您的示例中取决于您。

    <div style="width: 100%; display: flex; flex-direction: column">
      <div
        style="width: fit-content; margin-right: 10px"
        #self
        [ngStyle]="{'margin-left': 'calc(' + value +'% + 10px - '+ self.offsetWidth / 2 +'px)'}">
        {{value}} / 100
      </div>

      <mat-progress-bar
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value"
        [bufferValue]="bufferValue">
      </mat-progress-bar>
      
    </div>

工作示例：https://stackblitz.com/edit/progressbar-component-gfkdle?file=app%2Fprogress-bar-configurable-example.html

如何在垫子进度条中将分数放在百分比的中间

How to put fraction at the middle of percentage in mat progressbar

html

css

angular

typescript

angular-material