More than 3 years have passed since last update.

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

Rails5

Last updated at 2020-07-28Posted at 2020-07-28

##環境
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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up