Sử dụng gem SIMPLE_FORM

Simple Form nhằm mục đích giúp bạn tạo ra sự linh hoạt trong việc thiết kế form bằng các thành phần mạnh mẽ, mục tiêu cơ bản của Simple Form là ko can thiệp với cách bạn xác định các layout, cho phép bạn tìm thấy những thiết kế tốt hơn, đẹp mắt hơn.

Cài đặt

Thêm nó vào trong file gem cuả bạn:
gem "simple_form"

Chạy lệnh sau để cài đặt nó:
bundle install

Chạy lệnh sau:

rails generate simple_form:install

Tích hợp bootstrap: Simple Form có thể tương thích dễ dàng với bootstrap, để làm điều đó bạn phải lựa chọn bootstrap trong khi cài đặt simple_form, ví dụ:

rails generate simple_form:install --bootstrap

Zurb Foundation 5 Để tạo ra hàm tương thích với Zurb Foundation 5 , lựa chọn foundation khi generator, ví dụ như sau:

rails generate simple_form:install --foundation

Lưu ý: mặc định wrapper Foundation không hỗ trợ :hint. Để sử dụng nó, hãy bỏ comment trong config/initializers/simple_form_foundation.rb . Bạn sẽ cần cung cấp style CSS của riêng bạn cho :hint. Để hiểu rõ hơn về cách cài đặt Foundation trong rails, truy cập đường link sau: http://foundation.zurb.com/sites/docs/v/5.5.3/applications.html

Cách sử dụng:

simple form được thiết kế để được tùy chỉnh theo ý bạn. Về cơ bản nó là một tập hợp thành phần được viện dẫn để tạo ra một đầu vào html hoàn chỉnh cho bạn, mà theo mặc định label, hints, errors.

Để bắt đầu sử dụng simple form bạn chỉ cần sử dụng các helper được cung cấp:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

Bạn có thể ghi đè các thẻ label bởi input method, cũng có thể thêm hint,error, event vào trong placeholder.

<%= simple_form_for @user do |f| %>
  <%= f.input :username, label: 'Your username please', error: 'Username is mandatory, please specify one' %>
  <%= f.input :password, hint: 'No special characters.' %>
  <%= f.input :email, placeholder: 'user@domain.com' %>
  <%= f.input :remember_me, inline_label: 'Yes, remember me' %>
  <%= f.button :submit %>
<% end %>

Trong một số trường hợp, bạn có thể disable labels, hints or error. Hoặc bạn có thể định nghĩa thuộc tính html của labels, hints or error

<%= simple_form_for @user do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>

Simple Form tạo ra một wrapper div bao quang thẻ label và input ,sử dụng :wrapper_html option

 <%= simple_form_for @user do |f| %>
  <%= f.input :username, wrapper_html: { class: 'username' } %>
  <%= f.input :password, wrapper_html: { id: 'password' } %>
  <%= f.input :remember_me, wrapper_html: { class: 'options' } %>
  <%= f.button :submit %>
<% end %>

Simple Formcũng cho phép bạn ghi đè lên default input type do nó tạo ra:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.input :description, as: :text %>
  <%= f.input :accepts,     as: :radio_buttons %>
  <%= f.button :submit %>
<% end %>