Question

我试图通过创建自己的包装来自定义简单表单（对于semantic-ui）。然而，在每个输入（和包装器）周围添加一个div看起来很简单。

<div class="float optional recipe_yield">

这是我的自定义包装器：

  config.wrappers :semantic do |b|
    b.use :html5
    b.use :placeholder

    b.wrapper tag: :div, class: :field do |c|
      c.use :label_input
    end
  end

我希望f.input :name能够产生这样的结果：

<div class="field">
  <label class="string optional" for="recipe_name">Name</label>
  <input class="string optional" name="recipe[name]"   id="recipe_name"type="text">
</div>

相反，我得到了这个：

<div class="string optional recipe_name">
    <div class="field">
      <label class="string optional" for="recipe_name">Name</label>
      <input class="string optional" name="recipe[name]"   id="recipe_name"type="text">
    </div>
</div>

如何摆脱额外的<div class="string optional recipe_name">？我不想要简单的表单来添加它。或者可能有简单的形式包括＆＃39; field＆＃39;作为那个div中的一个类。

Answer 1

所以我管理得到简单的形式，将'field'添加为围绕标签和输入的div中的一个类。当你调用config.wrappers时，基本上只需要将它作为一个选项传递。

  config.wrappers :semantic, tag: 'div', class: 'field' do |b|
    b.use :html5

    b.use :placeholder
    b.use :label_input
  end

如你所见，我也删除了b.wrapper。否则它会在标签和输入周围添加一个div，但仍在

中

<div class="float optional recipe_yield">

简单的形式添加div

1 个答案: