Question

我在UI Bootstrap中设置了两个进度条，但我的目标是将它们合并为一个主条和一个仅以垂直条形式的辅助条。

以下是我的进度条的HTML代码：

<div>
  <h3 class="inline-block no-margin">Main</h3>
  <uib-progressbar value="95"
                   class="progress-xs no-radius"
                   type="success"></uib-progressbar>
  <h4 class="no-margin">SubCategory</h4>
  <uib-progressbar value="50"
                   class="progress-xs no-radius no-margin"
                   type="danger"></uib-progressbar>
</div>

我的问题是如何合并这两个，以便次要的只显示为主栏上的小竖条？

这样主栏显示95％的栏和子类别只显示垂直栏50％。
在here中有一个类似于此的示例，称为限制行，但它是另一个旧库。

Answer 1

您可以使用ng-style更新垂直线div的位置以解决此问题。这样您就可以轻松设置垂直条的位置和值。查看有关plunkr的 this 工作示例。

<强> HTML

<uib-progressbar animate="false" value=95 type="success"><b>95%</b></uib-progressbar>
<div id="vertical-mark" ng-style="style()">&nbsp;{{mark}}%</div>

<强> JS

$scope.mark = 50;
  $scope.style = function() {
    return {
      'left': $scope.mark + '%'
    }
  }

<强> CSS

#vertical-mark {
  position:relative;
  border-left:1px solid #000;
  height:50px;
  top:-57px;
}

作为替代方案，我还添加了一个带有堆叠进度条的类似实现。

Answer 2

我自己没有尝试过这个问题，但是当我看到你的问题时，我想到了这一点。

您可以修改ui-progressbars的CSS，使它们相互重叠;也许是position:absolute或者你有什么。这样就可以让数字标记像你想要的那样彼此相邻。

接下来，您可以修改条形图本身的CSS。任何低于最大值的条形图，或许给它们.no-fill类或其他东西。这会很棘手，但是这样你可以让任何低于最大％的条形仅由border-right属性组成，而最大％条形将是具有背景和所有正常进度条样式的条形。 / p>

可能出现的问题是，您可能还需要订购酒吧＆＃39; z-index以便最大值栏位于较小值后面，并显示垂直线。

祝你好运！

最终更新（使用plunkr）

JS

$scope.stacked = [{
  value: 55,
  type: 'info'
}, {
  value: 95,
  type: 'success'
}];

HTML

<div class="progress-wrapper">
  <uib-progress max="100" ng-repeat="bar in stacked | orderBy:'value':true">
    <uib-bar value="bar.value" type="{{bar.type}}">
      <span class="marker" ng-hide="bar.value < 5">
          {{bar.value}}%
        </span>
    </uib-bar>
  </uib-progress>
</div>

CSS

/* wrapper to help us contain the bars and their positioning */
.progress-wrapper {
  position: relative;
  padding-top: 30px;
}

/* make all progress bars the same, no bg so they 'stack' */
.progress-wrapper .progress {
  width: 100%;
  position: absolute;
  overflow: visible;
  background: none;
}

/* first child is the background bar, give it color */
.progress-wrapper .progress:first-child {
  background: #EEE;
}

/* make all bars invisible and with a right, border;
   except the last/furthest back bar, give it color only
*/
.progress-wrapper .progress .progress-bar {
  background: none;
  border-right: solid 2px #FFF;
}
.progress-wrapper .progress:first-child .progress-bar {
  background: #0AF;
  border-right: none;
}

/* makes sure that markers behave,
   otherwise they'll fly away
*/
.progress .progress-bar {
  position: relative;
}

/* style for marker element and drop triangle */
.progress .marker {
  position: absolute;
  padding: 0 2px;
  top: -30px;
  right: -15px;
  color: #FFF;
  background: #000;
}
.progress .marker:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #000;
  position: absolute;
  left: 30%;
  bottom: -5px;
  transform: rotate(45deg);
}

Answer 3

您可以使用堆叠的进度条和一些自定义样式。

<uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>

$scope.stacked = [{
  value: 10,
  type: 'info'
}, {
  value: 35,
  type: 'success'
}];

}）;

请参阅此https://angular-ui.github.io/bootstrap/

中的进度条

我的例子是https://plnkr.co/edit/9qCP1lV40BQ9DYDHvayo?p=preview

我已在堆叠的进度条中编辑了代码。认为这有帮助。

您可以为此添加自定义样式以显示进度值。

AngularJS UI Bootstrap合并两个进度条

3 个答案:

最终更新（使用plunkr）

JS

HTML

CSS