はじめに
blumaを使う予定の人向けに作成します。
jsはサクッと作ったものなので、運用には向いてないかも
環境
- ruby:3.0.0
- rails:6.1.5
- Webpacker : 5.4.3
手順
1. まずはインストール
yarnを使ってインストールします。
コマンド
yarn add bulma
2. CSSの読み込み
下記を追記します。
blumaのファイルの場所は違う可能性あるので、確認してください。
app/javascript/packs/application.js
import 'bulma/css/bulma.min'
3. 使ってみる
3-1 サンプル作成
サンプルでコントローラーとビュー作ります。
コマンド
rails g controller home index
3-2 blumaを使ってview作成
メッセージを表示させます。
app/views/home/index.html.erb
<div class="section" id="message-modal">
<article class="message">
<div class="message-header">
<p>ようこそ</p>
<button class="delete" aria-label="delete" id="close"></button>
</div>
<div class="message-body">
ここにメッセージを書くよ〜！
</div>
</article>
</div>
3-3 起動確認
こんな感じで適用されていればOK！
4. javascriptを書いてみる
4-1 jsファイルの作成
app/javascript/javascripts/application.js
document.addEventListener('DOMContentLoaded', () => {
// 閉じるボタンを取得します。
const $close = document.getElementById('close');
// ボタンのクリックイベントを追加します。
$close.addEventListener('click', () => {
// 閉じます。
const $modal = document.getElementById('message-modal');
$modal.classList.add('is-hidden');
});
});
4-2 読み込み
javascriptをアプリ全体に反映させるために追記します。書いた後はwebpakkerを再起動してね
app/javascript/packs/application.js
import '../javascripts/application.js'
4-3 起動確認
やったね！
