I want to make a Toggle Switch in Ruby on Rails

Question

I want to make a Toggle Switch in Ruby on Rails

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to do a Toggle Switch on RoR

My versions of ruby on rails are respectively:

ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [i386-mingw32]

and

rails -v
Rails 5.1.3

I created a project with scaffold

rails new comprobar
cd comprobar
rails generate scaffold Articulo nombre:string titulo:string contenido:text comprobar:boolean
rails db:migrate

What can be displayed on github: link

I'm using the gem bootstrap-switch-rails

NOTE: If someone has some other gem and / or procedure in rails that I can serve, I'm glad to follow your suggestion.

What I have done so far is the following:

Following the steps on the page: link

I copied the gem bootstrap-switch-rails to my gemfile and another two more

gem 'bootstrap-switch-rails'
gem 'bootstrap3-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 3.2.0'

I copied the respective js and style using sass , as indicated by the page referenced and the code as indicated by the page in the respective _form.html.erb

<% content_for :head do %>
  <script type="text/javascript">
  $(document).ready(function() {
    $('input:checkbox').bootstrapSwitch();
  });
  </script>
<% end %>

  <div class="field">
    <%= form.label :comprobar %>
    <%= form.check_box :comprobar,
    :data => { :size=>'small', 'on-color'=>'success', 'on-text'=>'YES', 'off-text'=>'NO' } %>
  </div>

bootstrap ruby-on-rails bootstrap-switch

asked by rrg1459 27.08.2017 в 14:27

source

2 answers

0

Another minimalist solution without additional code would be to add this code only to app / assets / stylesheets / application.scss:

/*....................................................*/

$claro: #EEEED8;
$fondo: #0099E5;
$gris: #D3D3D3;
$oscuro: #8A8081;
$relleno: #000099;

input[type="checkbox"] {
  appearance: none;
  background-color: darken($claro, 2%);
  border: 1px solid $oscuro;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px $gris;
  cursor: pointer;
  height: 14px;
  position: relative;
  transition: border .25s .15s,
              box-shadow .25s .3s,
              padding .25s;
  width: 33px;
  vertical-align: top;

  &:focus {
    outline: none;
  }

  &:after {
    background-color: $claro;
    border: 1px solid $oscuro;
    border-radius: 24px;
    box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025),
                0 1px 4px hsla(0,0%,0%,.15),
                0 4px 4px hsla(0,0%,0%,.1);
    content: '';
    display: block;
    height: 10px;
    left: 1px;
    position: absolute;
    right: 16px;
    top: 1px;
    transition: border .25s .15s,
                left .25s .1s,
                right .15s .175s;
  }
  &:checked {
    background-color: $fondo;
    border-color: $fondo;
    box-shadow: inset 0 0 0 13px $fondo;
    padding-left: 18px;
    transition: background-color .25,
                border .25s,
                box-shadow .25s,
                padding .25s .15s;

    &:after {
      border-color: $relleno;
      background-color: $relleno;
      left: 16px;
      right: 1px;
      transition: border .25s,
                  left .15s .25s,
                  right .25s .175s;
    }
  }
}

/*....................................................*/

NOTE: This change automatically modifies all check_boxes in the RoR application.

answered by 30.08.2017 в 02:45

Pipeline a -bash in C Read a text file and compare its contents with an arraylist in java

score 0 · Accepted Answer

There are two problems that prevent you from using the library correctly:

You need jQuery , so install jQuery in your project (remember that Rails 5.1 no longer has jQuery by default). You can do it in many ways, here I show you how to do it with the gem jquery-rails :

Add the gem jquery-rails in your Gemfile :

gem 'jquery-rails'

Install it with Bundle :

$ bundle install

Add it to your application.js file before of bootstrap-switch "

//= require jquery
//= require jquery_ujs
//= require bootstrap-switch

To use content_for you must add the block yield for the code to be included.

Add the yield :head block in application.html.erb :

<head>
  <title>Comprobar</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= yield :head %>
</head>