Question

我正在使用带引导程序3的simple_form gem。我想要一个提交按钮

的包装器

现在它将HTML显示为

<form id="new_order" ...>
    ...

   <input class="btn btn-primary" type="submit" value="Save" name="commit">
</form>

我想编写一个包装器，因此HTML将是：

<form id="new_order" ...>
  ...

  <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
        <input class="btn btn-primary" type="submit" value="Save" name="commit">
     </div>
 </div>

到目前为止我得到了这个：

应用程序/初始化/ simple_form_bootstrap.rb：

options[:wrapper] = :horizontal_form
options[:wrapper_mappings] = {
  check_boxes: :horizontal_radio_and_checkboxes,
  radio_buttons: :horizontal_radio_and_checkboxes,
  file: :horizontal_file_input,
  boolean: :horizontal_boolean,

 # what to write here??
 # submit: :horizontal_submit_button

}

这是我的包装器：

  config.wrappers :horizontal_submit_button, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
     b.use :html5
     b.use :placeholder

     b.wrapper tag: 'div', class: 'col-sm-offset-2 col-sm-10' do |ba|
       ba.use :input
       # some coe goes here, maybe
     end
  end

要在提交按钮的wrapper_mappings中使用哪种输入类型？如何写那个包装器？

Answer 1

我今天想要做同样的事情。奇怪的是，我无法通过包装器API找到方法，但默认情况下，Simple Form喜欢将其输入包装在div.form-inputs中，并将其提交按钮包含在div.form-actions中。因此，我将div.form-actions设为@extend .col-md-offset-4，以获得我想要的结果。

希望这有帮助！

Answer 2

简单形式button是rails submit helper的基本包装。它所做的就是在简单表单初始化程序中添加button_class并将其发送到submit，这就是它现在的样子：

https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/form_builder.rb#L211

def button(type, *args, &block)
  options = args.extract_options!.dup
  options[:class] = [SimpleForm.button_class, options[:class]].compact
  args << options
  if respond_to?(:"#{type}_button")
    send(:"#{type}_button", *args, &block)
  else
    send(type, *args, &block)
  end
end

这里没有使用包装器api的逻辑。但是if语句允许您定义自己的按钮方法。如果您在表单中使用f.button :submit而不是将其放入初始化程序（或装饰器中，这样您就不必在自定义时重新启动服务器）：

module SimpleForm
  class FormBuilder
    def submit_button(*args, &block)
      ActionController::Base.helpers.content_tag(:div, class: 'form-actions') do
        submit(*args, &block)
      end
    end
  end
end

您不必使用content_tag个助手，任何html_safe字符串都可以使用。

Answer 3

显然，使用simple_form不可能有按钮包装器。我想做同样的事情，我找到的解决方案是替换

config.button_class = 'btn'

与

config.button_class = 'myclass1 myclass2'

<{1>}文件中的

。问题是它将成为所有表单按钮的默认设置。

Answer 4

正如 @Alex 所提到的，如果您想要所有表单中的包装器，您可以添加自定义输入。

对于只需要以几种形式添加类的自定义解决方案

您可以使用 content_tag 包裹提交按钮

<%= f.input :first_name %>
<%= f.input :last_name %>
...
<%= content_tag(:div, class: 'form-group') do %>
  <%= content_tag(:div, class: 'col-sm-offset-2 col-sm-10') do %>
    <%= f.button :submit, value: 'Save', class: "btn-primary" %>
  <% end %>
<% end %>

这将为提交生成以下内容（不是故意在此处为输入添加生成的 HTML）

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <input type="submit" name="commit" value="Save" class="btn btn-primary" data-disable-with="Update User">
  </div>
</div>

Rails：simple_form中的提交按钮的自定义包装器？

4 个答案: