Флажки форматирования с Bootstrap в Rails формируют erb? - PullRequest
0 голосов
/ 31 марта 2020

Я использую несколько флажков в моей форме представлений Rails. Я использую Bootstrap 4 для стиля. Если для флажков есть стиль Bootstrap, например:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

, как мне реализовать стили нескольких классов в объекте erb? Вот код, который я пытаюсь реализовать:

            <%= f.collection_check_boxes(:authorization_ids, Authorization.all, :id, :auth_name, { checked: @account.try { |a| a.authorization_ids.map(&:to_param) } }, multiple: true, # WOULD LIKE TO IMPLEMENT BOOTSTRAP CLASSES HERE ) %>
        <%= f.label :authorization_ids, 'Authorizations' %>

ОБНОВЛЕНИЕ

Некоторые отличные ответы здесь. В итоге я использовал bootstrap_form_with из rails_bootstrap_form Gem. Я использовал пользовательский класс-обертку для стилизации и смог установить флажки в красивые упорядоченные столбцы и строки.

<div class="container">
    <div class="col">
        <div class="row justify-content-center">
            <div class='form-group'>
                <%= bootstrap_form_with(model: @account) do |f| %>
                <%= f.text_field :account_name %>
                <%= f.text_field :account_address_line1 %>
                <%= f.text_field :account_address_line2 %>
                <%= f.text_field :account_city %>
                <%= f.select :account_state, states %>
                <%= f.text_field :account_zipcode %>
                <%= f.text_field :contact_first_name %>
                <%= f.text_field :contact_last_name %>
                <%= f.email_field :contact_email %>
                <%= f.telephone_field :contact_phone %>
                <%= f.select :account_ppu, ppu, placeholder: "Select PPU...." %>
                <%= f.text_area :account_notes %>
            </div>

            <%= f.collection_check_boxes :authorization_ids, Authorization.all, :id, :auth_name, hide_label: true, wrapper: {class: "cp-container-class"} %>
        </div>
        <%= f.submit 'Create' %>
        <% end %>
    </div>
</div>

Стиль:

@import "bootstrap";
 @import "rails_bootstrap_forms";
 @import url('https://fonts.googleapis.com/css?family=Baloo+Thambi+2|Lato&display=swap');

 body {
     margin: 0px;
 }


#logo {
     margin: 1em;
     padding: 1em;
     width: 500px;
     height: auto;

 }

 .cp-container-class {
     width: 1000px;
     height: 500px;
     justify-items: center; 
    flex-direction:column;
      padding: 10px;
     /* Change to whatever*/
     display: flex;
     flex-wrap: wrap;
     border: black 1px solid;
 }

 .cp-container-class>* {
     flex: 1 1 20px; 
     margin-left: 50px; 
     letter-spacing: 5px;

 }

1 Ответ

0 голосов
/ 31 марта 2020

Согласно документации для collection_check_boxes, вы можете добавить HTML классы, используя конструктор, например:

collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial) do |b|
  b.label(class: "check_box") { b.check_box(class: "check_box") }
end

С точки зрения вашей ситуации, это будет выглядеть примерно так:

collection_check_boxes(:authorization_ids, Authorization.all, :id, :auth_name, { checked: @account.try { |a| a.authorization_ids.map(&:to_param) } }, multiple: true) do |b|
  b.label(class: "some-class another-class") { b.check_box(class: "a-class a-different-class") }
end

Это может быть не совсем то, что вы хотите; возможно, вам придется немного поиграть с этим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...