1

Я использую Rails 4.2.4 с Bootstrap 4 (используя самоцветов bootstrap_ruby).Как удалить тип класса ввода по умолчанию из Simple Form, используя Rails 4 и Bootstrap 4?

Простая форма добавляет классы типа ввода в форму ..., если вход представляет собой строку, он добавит к входу класс string. Я хотел знать, как остановить это?

Например, если у меня была форма с вводом файла.

simple_form_for @attachment do |f| 
    f.input_field :file, as: :file 
end 

Он будет производить следующий HTML:

<form> 
    ... 

    <div class="form-group file optional photo_image"> 
    <label class="file optional control-label" for="attachment_file">File</label> 
    <input class="file optional" type="file" name="attachment[file]" id="attachment_file"></div> 

    ... 

</form> 

Это добавляет file класс к label и input полей. Есть ли способ удалить класс file при создании формы?

Я пытаюсь использовать Bootstrap 4 (Alpha), и он сталкивается с именем класса file.

Я думал, что смогу сделать это на config.wrappers, но добавляет тип ввода как класс, например. string, file.

Заранее спасибо.

ответ

2

Выбор именования Bootstrap 4 в пользовательском поле файла является неудачным, так как он очень общий. К сожалению, нет простого способа переключения, который автоматически добавляет css-классы с помощью SimpleForm.

Мое решение ввести новое поле ввода, который только наследует от FileInput, поэтому он получает другое имя и так различный CSS-класс:

// initializer 
# create a new file_hack input type same as file 

class SimpleForm::Inputs::FileHackInput < SimpleForm::Inputs::FileInput 
end 

# optional: map file_hack to a input type configuration for easier classes etc. 
SimpleForm.setup do |config| 
    ... 
    config.wrapper_mappings = { 
    # check_boxes: :vertical_radio_and_checkboxes, 
    # radio_buttons: :horizontal_radio_and_checkboxes, 
    # file: :vertical_file_input, 
    file_hack: :vertical_file_input, 
    # boolean: :vertical_boolean 
    } 

    config.wrappers :vertical_file_input, tag: 'fieldset', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label, class: 'control-label' 

    b.wrapper tag: 'div' do |ba| 
     ba.use :input, class: 'form-control-file' 
     ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'div', class: 'text-muted' } 
    end 
    end 

вызов файла поля как новый вход " тип".

// form 
= f.input :file, as: :file_hack 
+0

приятно, спасибо. Можете ли вы объяснить, что делает ваша дополнительная настройка, или привести пример использования? – jrochkind

 Смежные вопросы

  • Нет связанных вопросов^_^