Rails draw progress bar instead of integer value

问题

I'm now using ActiveAdmin as the admin panel for Rails website. On index page of Teams, it shows team's score as integer.

Instead of showing the integer, is there any way to show the static progress bar, scale of 100?

Sorry for my poor english. Thanks for your help.

回答1:

Just need to add static integer and it will dynamically show your progress bar.

You need to customized a bit something like like this, also loop it

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">"#{score}"</span>
  </div>
</div>

Bootstrap provides several types of progress bars

https://v4-alpha.getbootstrap.com/components/progress/

basic progress bar

You can check this out for more customized : http://jasontruluck.org/blog/bootstrap/refile/images/ui/2015/04/07/Adding-Bootstrap-Progress-Bars-for-Refile.html

回答2:

I've solved it. So here is what I did :

Include bootstrap gem in my Gemfile

gem 'bootstrap', '~> 4.0.0.alpha6'

Restart the server and then import bootstrap to /app/assets/active_admin.scss

@import "bootstrap";

Now you can add progress bar or other components to any page of ActiveAdmin. For example for dashboard page, add the following code to the /app/admin/dashboard.rb

render html: "<div class='progress'><div class='progress-bar' role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemax='100' aria-valuemin='0'>25%</div></div>".html_safe

来源：https://stackoverflow.com/questions/43462860/rails-draw-progress-bar-instead-of-integer-value

标签

ruby-on-rails

activeadmin