Railsで使えるGem

Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize

投稿日:2016年1月5日 更新日:

マテリアルデザイン

マテリアルデザインはGoogleが提唱する物が実際にあるっぽくみせるデザイン.
紙やカードが本当にあるようなわかりやすい動きをする.

日本語訳

matelialize

matelializeはマテリアルデザインに沿ったcssフレームワークの一つ.
materializecss.com/

sassバージョン
mkhairi/materialize-sass

sassバージョンがあるだけにRailsと親和性が高そう.
Tutorial: Using Materialize with Ruby on Rails & Simple Form

Gemfile

application.scss

このままだと、ピンクぽい公式サイトのカラーが主な色として使われる.
その前に色とかを設定する.

application.html.erb

また、head内でアイコンも読み込んでおく.

application.js

Javascriptも読み込んでおく

できた

screenshot

selectタグやmediaboxなどは、Javascriptまで実行しないといけないので、注意が必要.

simple_form

config/initializers/simple_form.rb

上のチュートリアルを参考に

そして、ボタンも設定

デフォルトでマテリアルデザインを使う.

datepickerを使う

type=”date”で、適当にクラスやIDを指定して、pickadate.jsを使う.
simple_formでdate_fieldを使うには、結局、type: :dateにして、html5: trueとしておくことになったみたい.
github.com/plataformatec/simple_form/commit/fb1f52dbc5855e3e33bc441ec89c9bd519d416cb

そして、pickadate.jsを使う.

参考: MaterializeCSSのDate Pickerを日本語化する

-Railsで使えるGem
-, ,

執筆者:

関連記事

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

目次1 参考2 前提の環境3 Gemfile4 View5 Controller6 できた7 パーシャル化8 フォームを追加する場所を指定する9 一対一の場合10 そのほか11 番外編: 1つのモデル …

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list

SimpleCovのカバレッジをvimに表示させる~simplecov-vim

      github.com/nyarly/Simplecov-Vim 参照 Rails3でテストカバレッジを計測する~simplecov,thin 自分のgem上の …

no image

Rails3.2でOpenDocumentText(.odt)を作成~serenity

  これも途中経過デス   odtはOpenOffice.orgのwriterなんかの保存形式 serenityはerbライクなodtテンプレートから変数を利用して文書を作成してく …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …