Question

所以我有一个进度条组件，当值达到100％时，我想改变颜色或绿色。这是使用以下方式处理：
ng-class="{'progress-100': progress.value == 100}"

在我看来，我有%atom-progressbar

我对如何评估是否在链接中添加课程感到困惑

这是我到目前为止所做的：

＆＃13;

app = angular.module('appname')

pattern =
  name: 'atomProgressbar'

# ---------------------------------------------------------- #
# Logo

app.directive 'atomProgressbar', ($patterns, $atomicService) ->
  template: """
  <progress ng-class="{'progress-100': progress.value == 100}" id='progress-bar' max='100' value='20'></progress>
  """
  scope: $patterns.NGBindings(pattern.bindings)
  link: ($scope) ->
    $atomicService.processBindings(pattern, $scope)



# EXAMPLE ->
# %atom-progress{:max => "100", :value => "0"}

export default pattern

＆＃13;

// # ========= --- Progressbar Styles --- ========== # \\

atom-progressbar {
  appearance: none !important;
  width: 100%;
  height: 40px;
}

progress {
  appearance: none;
  width: 100%;
  height: 20px;
  border: none;
}

progress::-webkit-progress-bar {
  background-color: get-color('light-grey');
  width: 100%;
}

progress::-moz-progress-bar {
  background-color: get-color('warning');
  width: 100%;

}

progress::-webkit-progress-value {
  background-color: get-color('warning');
  transition: all .7s;
}

progress::-moz-progress-value {
  background-color: get-color('warning');
  transition: all .7s;
}

.progress-100 {
  background-color: forestgreen;
  transition: all .5s;
}

.progress-100::-webkit-progress-value {
  background-color: forestgreen;
  transition: all .5s;
}

.progress-100::-moz-progress-value {
  background-color: forestgreen;
  transition: all .5s;
}

＆＃13;

 %atom-progressbar

＆＃13;

Answer 1

我没有正确理解你的问题。但我认为你可以在你的代码中使用.alternate类。例如，请考虑以下代码段。

if (progress === 0) {
    progressbar.classList.toggle('alternate')
    // ...
}

然后您可以设置您选择的颜色。

进度条组件

1 个答案: