进度条值

Question

一段时间以来，我一直在想办法让进度条正确显示，但我似乎想不通。

我有一个整数值 (<% goal.ppercent %>)，我想将其设置为进度条的值。当我尝试更改任何“aria-value”时，它不会更改进度条，但当我更改 style="width:" 值时，它会更改进度条。有人可以向我解释如何正确设置 bootstrap 进度条吗？

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow= 
    <% goal.ppercent %> aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <%= number_to_percentage(goal.ppercent, precision: 0) %> 
    </div>
</div>

Answer 1

您需要更改内部 .progress-bar 的宽度才能更改百分比。

ARIA 仅代表可访问的富互联网应用程序。它只是一组属性，可以让残障人士更容易访问 Web 内容。事实上，您不必拥有 ARIA 属性即可使进程栏正常工作。

既然你有百分比，那就继续更新 .process-bar 的宽度。

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" 
      role="progressbar" 
      aria-valuenow=<% goal.ppercent %> aria-valuemin="0" aria-valuemax="100" 
      style="width: <% goal.ppercent %>%;">
        <%= number_to_percentage(goal.ppercent, precision: 0) %> 
    </div>
</div>

进度条值

Progress Bar value

ruby-on-rails

ruby-on-rails-4

bootstrap-4

ruby-on-rails-5