deviseのflashメッセージにbootstrapのアラートを適用

3767 ワード
Rails5 Rails5 テキストリンク

環境

ruby 2.5.7
rails 5.2.3
bootstrap導入済み

実装

①helperメソッドを定義

keyをbootstrapように置き換えていきます。
alert→warning , notice→success , error→danger

app/helpers/devise_helper.rb
module DeviseHelper
  def bootstrap_alert(key)
    case key
    when "alert"
      "warning"
    when "notice"
      "success"
    when "error"
      "danger"
    end
  end
end

②flashメッセージのテンプレートを作成

置き換えたkeyでclass名が変わるようにします。(３行目)
divタグの中はbootstrapのリファレンスを参照

views/layouts/_flashes.html.erb
<% flash.each do |key, value| %>
  <div class="alert alert-<%= bootstrap_alert(key) %> alert-dismissible fade show">
    <span><%= value %></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

③application.html.erbで呼び出す

適当な場所で呼び出しましょう。

<body>
  <%= render 'layouts/header' %>
  <%= render 'layouts/flashes' %>
  <%= yield %>
  <%= render 'layouts/footer'%>
</body>

参考
https://hachy.github.io/2019/10/15/flashes-with-devise-and-bootstrap.html

bootstrap 4.3 alert