🙄
Rails 6.0 で Fomantic-UI を使う
初めに
Ruby on Rails で、Fomantic UI
を使うための記事です。
環境
% ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin19]
% rails -v
Rails 6.0.3.2
新規作成
新しいRailsアプリを作成します。
アプリ名は、awesome_app とし、データベースには、postgresqlを使うこととします。
ActionMailer等、使わないものはスキップします。
% rails new awesome_app --database=postgresql --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-action-cable --skip-keeps
Gemfile
簡潔にビューを記述できるslimが好きなので、
テンプレートエンジンにはslimを使うよう、slim-rails
を追加します。
また自動生成されたapp/views/layouts/application.html.erbもslim形式に変換できるよう、html2slim
も追加します。
# Gemfile
gem 'slim-rails'
gem 'html2slim'
erbをslimに変換
% erb2slim app/views --delete
変換が終わったら、html2slim
は使わないので、削除します。
# Gemfile
gem 'slim-rails'
Fomantic-UIを導入する
Fomantic-UIは、Semantic-UIのコミュニティフォークです。
jQueryも必要なので、一緒にインストールします。
% yarn add fomantic-ui jquery
yarn でインストールしたFomantic-UIと、jQueryをwebpackで管理します。
ついでに、Fomantic-UIでドロップダウンメニューが使えるよう追記します。
// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("jquery")
import "fomantic-ui/dist/semantic.min.css"
import "fomantic-ui/dist/semantic.min.js"
//初回読み込み、リロード、ページ切り替えでドロップダウンメニューを使えるようにする
$(document).on('turbolinks:load', function() {
// show dropdown on hover
$('.ui.dropdown').dropdown({
on: 'hover'
});
})
トップページにメニューを配置します。
/ app/views/layouts/application.html.slim
doctype html
html
head
title
| AwesomeEvents
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
body
/! 上部ナビゲーションメニュー
.ui.top.fixed.menu
.ui.container
= link_to 'さくら商会', root_path, class: 'ui item'
.ui.right.menu
.ui.dropdown.item
| 会社案内
i.dropdown.icon
.menu
= link_to '会社概要', root_path, class: 'ui item'
.divider
= link_to '沿革', root_path, class: 'ui item'
= link_to 'お問い合わせ', root_path, class: 'ui item'
= yield
Discussion