处理指示器更改布局 SAPUI5

Question

你好有人可以帮我吗？我要从 SAPUI5 更改我的过程指示器以制作类似这样的东西 enter image description here

这个想法是显示有多少百分比支持某事，有多少百分比反对谢谢

Answer 1

您可以像这样创建自定义控件或向 onAfterRendering 事件添加一些代码。

  ProgressIndicator.extend("ProgressIndicatorEx", {
    renderer: {},
    onAfterRendering: function() {
      if (ProgressIndicator.prototype.onAfterRendering) {
        ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
      }

      var percentValue = this.getPercentValue();
      this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>'); 

      var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
      rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
      rightBar.css("background-color", "#c00")
      rightBar.css("border-color", "#c00")
    }

演示：https://jsbin.com/yawiqam/edit?js,output

处理指示器更改布局 SAPUI5

processe indicator change layout SAPUI5

css

sapui5