我正在尝试使simple_form与Bulma CSS框架一起使用，以便可以将图标选项传递给输入。所有这些都需要为输入和包装提供以下HTML输出，并根据需要使用相关的CSS类和图标范围：

<div class="field">
  ...
  <div class="control has-icons-left has-icons-right">
    <input ... >
    <span class="icon is-small is-left">
      <i ... >
    </span>
    <span class="icon is-small is-right">
      <i ... >
    </span>
  </div>
</div>

我正在使用以下包装器：

# lib/simple_form/bulma_wrapper.rb

SimpleForm.setup do |config|
  config.wrappers :bulma_vertical_form,tag: :div,class: "field" do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label,class: "label"
    b.wrapper :control_wrapper,class: "control" do |bb|
      bb.use :input,class: "input",error_class: "is-danger"
      bb.optional :icons
    end
    b.use :full_error,wrap_with: { tag: :p,class: "help is-danger" }
    b.optional :hint,class: "help" }
  end
end

我已经创建了一个IconComponent来创建图标范围。经过反复试验，它运作良好。所以现在我可以像这样将选项传递给输入了：

<%= 
  f.input :email,icons: { left: "far fa-envelope",right: "fas fa-check" },control_wrapper_html: { class: "control has-icons-left has-icons-right" } 
%>

这不是很简单。有没有[em> 更好的方法来将类应用于control div？我尝试将其制作成一个组件，但无法弄清楚如何使其与必须包装的两个组件一起使用。