Materialize와 simple_form으로 간단하고 좋은 느낌의 양식을 만들고 싶습니다!

머티리얼 디자인 「Materialize」와 폼의 기술이 심플한 「simple_form」의 구현을 했으므로, 메모.
이번은 심플한 input 박스만이 됩니다. select 박스도 사용하고 싶은 분은 아래를 참조하십시오.
enum을 사용한 선택 상자 구현

젬파일에 젬을 기재한 bundle install



Gemfile.
gem 'simple_form' #simple_formのGem
gem 'materialize-sass' #MaterializeのGem
gem 'jquery-rails' #記載あるか確認

터미널.
bundle install

「jquery-rails」의 기재가 있는지 확인입니다.
없으면 Materialize가 올바르게 표시되지 않는 경우는 기재합시다.

simple_form 설치



터미널.
rails g simple_form:install

위 명령은 관련 파일의 작성을 작성합니다.
simple_form의 도입은 이제 괜찮습니다.

simple_form을 작성하는 방법 (예)


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

위와 같이 간단하게 작성할 수 있습니다.
자세한 내용은 [Github] simple_form을 참조하십시오.

Materialize 계속



「application.css」의 파일명을 「application.scss」로 변경.
"materialize"를 로드합니다.

application.scss

@import "materialize";

결과 확인




성공적으로 표시되었습니다! !



1. 이미지 업로드 Carrierwave 도입 방법

2. 이번에 작성한 폼의 코드

new.html.haml
.row
  = simple_form_for(@product) do |f|
    .row
      .input-field.col.s6
        = f.input :name
        = f.input :description
        = f.input :price
        = f.input :unit
        = f.input :image
        = f.button :submit

참고



[참고] Rails의 form_for에서 코드를 깔끔하게 만드는 simple_form 사용법 [참고] Github simple_form
[참고] Github materialize-sass
[참고] 【Rails】【소스 코드 있음】Materializecss를 간단하게 도입하는 방법

좋은 웹페이지 즐겨찾기