web-dev-qa-db-ja.com

rails

Rails 4とBootstrapを使用したシンプルフォームを使用しています。

私のチェックボックスがそれを気に入らないようにしたい：

<%= c.input :my_bool_field, label: false, class: "form-control" %>

enter image description here

しかし、そのようなもの（私はそのためのCSSを持っています）

<label class="switch switch-primary">
    <input type="checkbox" />
    <span></span>
</label>

enter image description here

Simple_formラッパーを使用できることは知っていますが、少し混乱します。誰かがそのスタイルでチェックボックスを作成するのを手伝ってくれませんか？

htmlcssruby-on-railstwitter-bootstrapsimple-form
7
Guy Dubrovski

このプロジェクトは非常に便利で完全であることがわかりました。これはTwitterのブートストラップに基づいています： http://www.bootstraptoggle.com/

それを埋め込んだ Rails gem があります：

3
nizzin

このリンクにアクセスして、「スイッチ」を確認してください。 getbootstrap.com

enter image description here

この例がお役に立てば幸いです。現在、Bootstrap 4.3およびRails 5.2;

モデルの形式で「カスタムスイッチ」を使用すると、次のように機能します。

--model/_form.html.erb

<%= form_with(model: employee, local: true) do |form| %>
 <div class="custom-control custom-switch">
    <%= form.check_box :active, class: "custom-control-input", id: "customSwitch1"   %>
  <label class="custom-control-label" for="customSwitch1">Status: </label>
 </div>
 <div class="actions">
     <%= form.submit %>
 </div>
<% end %>

お役に立てば幸いです。私はRailsとBootstrapの初心者です。

よろしく！

2
Gamaliel

Rails Switchery gem found at https://github.com/abpetkov/switchery

イニシャライザを介してsimpleformsのビルド済みラッパーを変更したり、ビューでjquery関数を呼び出したりすることなく、bootstrapおよびiosスタイルスイッチを簡単にカスタマイズできます。

0
bkunzi01

チェックボックスを中に入れるだけです

<label class="switch switch-primary">
     <%= f.input_field :my_bool_field, label: false, as: :boolean, class: 'form-control' %>
    <span></span>
</label>
0
Bartłomiej Gładys