README.md in materialize-form-1.0.2 vs README.md in materialize-form-1.0.3

- old
+ new

@@ -1,112 +1,115 @@ # Materialize::Form This is a generator gem for [SimpleForm](https://github.com/plataformatec/simple_form) to make it works with [MaterializeCSS](http://materializecss.com/). -There is an example application available on Heroku that demonstrate various features of Materialize::Form. You can view them here: http://materialize-form.herokuapp.com/. [Source Code](https://github.com/jamesfwz/materialize-form-example) +There is an example application available on Heroku that demonstrate various features of Materialize::Form. You can view here: http://materialize-form.herokuapp.com/. To see the [Source Code](https://github.com/jamesfwz/materialize-form-example) -## Installation +Haven't install [SimpleForm](https://github.com/plataformatec/simple_form) and [MaterializeCSS](http://materializecss.com/)? Please follow this instruction: Add this line to your application's Gemfile: +``` ruby +gem 'simple_form' +gem 'materialize-sass' +``` +```console +$ bundle install +rails generate simple_form:install +``` +Import Materialize styles in app/assets/stylesheets/application.scss: +```scss +@import "materialize"; +``` +**NOTE:** If you have just generated a new Rails application, it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so remove it. +```console +$ rm app/assets/stylesheets/application.css +``` + +## Installation + +### Step 1: +Add this line to your application's Gemfile: ```ruby -gem 'simple_form', "~> 3.2.1" -gem 'materialize-sass', "~> 0.97.6" gem 'materialize-form' ``` -And then run the bundler and restart your server to make the files available through the pipeline: +### Step 2: +Run the bundler and restart your server to make the files available through the pipeline and run the generator ```console $ bundle install -``` - -Run the generator: -```console $ rails generate simple_form:materialize:install ``` +### Step 3: Import Materialize Form javascript in `app/assets/javascripts/application.js`: - ```js -//= require jquery -//= require materialize-sprockets //= require materialize-form $(document).ready(function() { window.materializeForm.init() }); ``` -Import Materialize styles in `app/assets/stylesheets/application.scss`: - -```scss -@import "materialize"; -``` - -**NOTE:** If you have just generated a new Rails application, it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so remove it. - -```console -$ rm app/assets/stylesheets/application.css -``` - ## Usage ### Assume you are using SLIM To start using Materialize Form you just have to use the helper it provides: ```slim = simple_form_for @user do |f| .row - = f.input :name, wrapper_html: { class: 'm6 s12' } + = f.input :first_name, wrapper_html: { class: 'm6 s12' } + = f.input :last_name, wrapper_html: { class: 'm6 s12' } = f.button :submit ``` #### Selectbox ```slim - = f.input :gender, include_blank: 'Select your gender', wrapper_html: { class: 'm6 s12' } += f.association :country, include_blank: 'What are your country?', wrapper_html: { class: 'm6 s12' } ``` #### File Input File input will be generated automatically if the type of the field is attachment. ```slim - = f.input :avatar, wrapper_html: { class: 'm6 s12' } += f.input :avatar, wrapper_html: { class: 'm6 s12' } ``` #### Date Input Date picker will be generated automatically if the type of the field is date. ```slim - = f.input :dob, wrapper_html: { class: 'm6 s12' } += f.input :dob, wrapper_html: { class: 'm6 s12' } ``` #### Checkboxes ```slim - = f.input :hobbies, as: :check_boxes, wrapper_html: { class: 'm6 s12' } += f.association :hobbies, as: :check_boxes, wrapper_html: { class: 'm6 s12' } ``` #### Multi-Selectbox ```slim - = f.input :hobbies, include_blank: 'What are your hobbies?', wrapper_html: { class: 'm6 s12' } += f.association :hobbies, include_blank: 'What are your hobbies?', wrapper_html: { class: 'm6 s12' } ``` #### Toggle Boolean ```slim - = f.input :featured, wrapper_html: { class: 'm6 s12' } += f.input :featured, wrapper_html: { class: 'm6 s12' } ``` #### Boolean ```slim - = f.input :featured, wrapper: :materialize_boolean, wrapper_html: { class: 'm6 s12 ' } += f.input :featured, wrapper: :materialize_boolean, wrapper_html: { class: 'm6 s12 ' } ``` #### Radio Buttons ```slim - = f.input :featured, as: :radio_buttons, wrapper_html: { class: 'm6 s12' } += f.input :featured, as: :radio_buttons, wrapper_html: { class: 'm6 s12' } ``` ## Working with [Nested Form](https://github.com/ryanb/nested_form) In `app/assets/javascripts/application.js`: