带有simple_form的Bootstrap输入组包装器

时间:2015-03-18 12:26:24

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-4 simple-form

我正在使用带引导包装器的simple_form,并且无法弄清楚,如何执行此操作。

我想生成这样的输入:

<div class="form-group string optional event_start_time_date ">
  <label class="string optional control-label" for="event_start_time_date">Start date</label>
  <div class="input-group date" id="date_picker">
    <input class="string required form-control" type="text" name="event[start_time_date]" id="event_start_time_date">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

我的包装器看起来像这样:

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :label, class: 'control-label'
  b.wrapper :input_group_div, tag: 'div', class: 'input-group' do |ba|
    ba.use :input, class: 'form-control'
  end

  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

<%= f.input :start_time_date, as: :string, required: false, label: "Start date", wrapper: :input_group, :input_group_div_html {class: "date", id: "date-picker"} %>

它生成以下html输出:

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

现在存在差异:

  1. <span class="input-group-addon">这是必需的,应该由包装器生成,但我不知道如何在包装器中生成它。
  2. <span class="glyphicon glyphicon-calendar"></span> - 不同的输入组在这里将有不同的类和不同的范围文本,如果我可以将其作为<%= f.input ...
  3. 中的某个选项传递,则最好

4 个答案:

答案 0 :(得分:0)

你的包装器看起来对我很好,但你视图中用于渲染字段的代码需要进行一些更改:

<%= f.input :start_time_date, as: :string, required: false, label: "Start date" do %>
  <%= f.input_field :start_time_date, class: "form-control" %>
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
<% end %>

通过将块传递到输入字段,您可以将日历图标添加到输入字段。 f.input_field帮助器方法呈现实际输入字段,外部f.input用于匹配正确的包装器。

有关将simple_form与Bootstraps输入组一起使用的更多信息和竞争示例,您可以查看我的blog post

答案 1 :(得分:0)

同样的问题解决了这个问题。

config.wrappers :input_group, tag: 'div', class: 'form-group',  error_class: 'has-error' do |b|
  b.use :label, class: 'control-label'
  b.wrapper :input_group_div, tag: 'div', class: 'input-group' do |ba|
    ba.use :input, class: 'form-control'
    ba.wrapper tag: 'span', class: 'input-group-addon' do |append|
      ba.wrapper tag: 'span', class: 'glyphicon glyphicon-calendar' do |i|
      end
    end
  end

  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

答案 2 :(得分:0)

您只需在&lt;%= f.input%&gt;之间添加一个div即可。和&lt;%f.input_field%&gt;。工作正常:

  <%= f.input :start_time_date, as: :string, required: false, label: "Start date" do %>
   <div class="input-group">
      <%= f.input_field :start_time_date, class: "form-control" %>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
   </div>
  <% end %>

答案 3 :(得分:0)

  = simple_form_for(current_account) do |f|
    = f.input :slug, required: true, label: 'URL da página' do
      .input-group
        .input-group-prepend
          span.input-group-text https://www.immobilier.com.br/
        = f.input_field :slug, class: 'form-control'

enter image description here