Question

我有自定义包装器：

  config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'

    b.use :input, class: 'form-control', wrap_with: { tag: 'div', class: 'input-group' }
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

带输入的表单：

<%= simple_form_for @event do |f| %>
  ...
  <%= f.input :start_date, as: :string, wrapper: :input_group %>
  ...
<% end %>

它会生成html：

<div class="form-group string optional event_start_date">
  <label class="string optional control-label" for="event_start_date">Start date</label>
  <div class="input-group">
    <input class="string optional form-control" type="text" name="event[start_date]" id="event_start_date">
  </div>
</div>

我想在输入元素旁边添加span：

<div class="form-group string optional event_start_date">
  <label class="string optional control-label" for="event_start_date">Start date</label>
  <div class="input-group">
    <input class="string optional form-control" type="text" name="event[start_date]" id="event_start_date">
----> <span class="input-group-addon">TEST</span><----
  </div>
</div>

我该怎么做？（每个输入元素的跨区文本将不同）

Answer 1

如果还有其他人仍在寻找这个，那么hint助手就是这样做的：在输入字段旁边添加一个带有任意文本的元素。在上面的例子中，它看起来像这样：

首先将hint包装器元素更改为span

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  ...
  b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  ...
end

然后在您的视图中调用hint：

<%= simple_form_for @event do |f| %>
  ...
  <%= f.input :start_date, as: :string, wrapper: :input_group, hint: 'TEST' %>
  ...
<% end %>

使用simple_form和自定义包装器在输入字段旁边添加span

1 个答案: