Wie man Form in Rails materialisiert?

Question

Also habe ich Materialise CSS mit meiner Rails App implementiert. Ich hatte bereits Bootstrap installiert.

Grundsätzlich möchte ich Materialize Form Komponenten innerhalb der App haben. Ich habe Probleme damit herauszufinden, wie man in Rails ein materialisiertes Formular erstellt, das Details aus dem Formular übermittelt. Ich sehe, dass Komponenten zeigen.

Wie kann ich materialisierte Formularkomponenten in diesem Formular implementieren? In meiner Devise, bearbeiten Form sieht das Formular wie folgt aus:

<div class="panel-body"> 
      <%= form_for resource, as: resource_name, url: registration_path(resource_name), layout: :horizontal do |f| %> 
      <!-- = devise_error_messages! 
      --> 
      <div><%= f.label :first_name %><br /> 
      <%= f.text_field :first_name, autofocus: true %></div> 

      <div><%= f.label :last_name %><br /> 
      <%= f.text_field :last_name, autofocus: true %></div> 

      <div><%= f.label :gender %><br /> 
      <%= f.text_field :gender, autofocus: true %></div> 

      <div><%= f.label :age_range %><br /> 
      <%= f.text_field :age_range, autofocus: true %></div> 


      <%= f.email_field :email, autofocus: true %> 
      <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> 
       <p> 
       Currently waiting confirmation for: 
       <%= resource.unconfirmed_email %> 
       </p> 
      <% end %> 
      <%= f.password_field :current_password %> 
      <%= f.password_field :password, autocomplete: "off" %> 
      <%= f.password_field :password_confirmation, autocomplete: "off" %> 

      <%= f.submit "Update" %> 
      <% end %> 
     </div> 
     </div> 

Answer 1

Sie MaterilizeCSS Eingabefeld Klassen für Ihre Eingabefelder wie diese verwenden können.

<div class="input-field col s6"> 
    <%= f.label :first_name %><br /> 
    <%= f.text_field :first_name, autofocus: true %> 
</div> 

<div class="input-field col s6"> 
    <%= f.label :last_name %><br /> 
    <%= f.text_field :last_name, autofocus: true %> 
</div> 

So können Sie MaterialiseCSS Stil erreichen.

Answer 2

Fügen Sie diese auf Ihre gemfile

gem 'materialize-form' 

und these instructions folgen.