web-dev-qa-db-ja.com

TwitterのFlashメッセージのカスタムクラスとフォーマットBootstrap defaults

Twitter bootstrap cssをアプリケーションに統合しています。順調に進んでいますが、フラッシュメッセージのcssとラッパーをカスタマイズする方法がわかりません。

フラッシュメッセージをデフォルトのBootstrapクラス：

    <div class="alert-message error">
      <a class="close" href="#">×</a>
      <p><strong>Oh snap!</strong> Change this and that and <a href="#">try again</a>.</p>
    </div>

現在、フラッシュメッセージを次のように出力しています。

<% flash.each do |name, msg| %>
    <%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>

：notificationまたはその他のRailsフラッシュメッセージを情報のようにブートキャンプのクラスにマップする小さなスイッチを実行する簡単な方法はありますか？

ruby-on-railsruby-on-rails-3twitter-bootstrap
27
Rapture

これがBootstrap 2.0.0での私の答えです

app/helpers/application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-error"
    when :alert then "alert alert-error"
    end
  end
end

app/views/shared/_flash_messages.html.erb

<% [:notice, :error, :alert].each do |level| %>
   <% unless flash[level].blank? %>
     <div class="<%= flash_class(level) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
       <%= content_tag :p, flash[level] %>
     </div>
   <% end %>
<% end %>

これにより、ボタンを閉じて閉じるとフェードアウトします。 HAMLを使用している場合は、この人の投稿をチェックしてください： http://Ruby.zigzo.com/2011/10/02/flash-messages-twitters-bootstrap-css-framework/

8
LearningRoR

MarkBerryの回答に基づいてBootstrap 3.0の新しい回答を追加しています。アラートのBootstrap CSSは http：// getbootstrap。 com/components /＃alerts

app/helpers/application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert-info"
    when :success then "alert-success"
    when :error then "alert-danger"
    when :alert then "alert-warning"
    end
  end
end

app/views/layouts/_flash_messages.html.erb

<div>
  <% flash.each do |key, value| %>
    <div class="alert alert-dismissable <%= flash_class(key) %> fade in">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= value %>
    </div>
  <% end %>
</div>

違い：

  • エラーとアラートのBootstrapクラスを変更します。
  • 追加 .alert-dismissableそして閉じるボタンのコードを変更します。
6
rohitmishra

これを試して：

application_helper.rb

def flash_class(level)
  case level
    when :notice then "info"
    when :error then "error"
    when :alert then "warning"
  end
end

その後

<% [:notice, :error, :alert].each do |level| %>
  <% unless flash[level].blank? %>
    <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in">
      <a class="close" href="#">×</a>
      <%= content_tag :p, flash[level] %>
    </div>
  <% end %>
<% end %>
2
Zoran Kikic

ブートストラップ3クラス名（Mark Berryの回答から調整）：

def flash_class(level)
  case level
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-danger"
    when :alert then "alert alert-warning"
  end
end
2
Judd Lyon

Railsで使用されるさまざまな通知レベルのクラスを追加することをお勧めします。

.alert-notice {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48; }

等.

twitterブートストラップの例に従ってそれらを使用します。

<% flash.each do |key, value| %>
    <div class="alert alert-<%= key %>">
        <a href="#" data-dismiss="alert" class="close">×</a>
        <%= value %>
    </div>
<% end %>

これにより、ApplicationHelper＃flash_class（level）は廃止されます。においがするアプリケーションにスタイリングをハードコードします。スタイリングはスタイルシートに属します。

1
tvw

これは理想的な解決策ではありませんが、「通知」または「エラー」フラッシュメッセージのみを使用すると仮定すると、次のように使用できます。

...
<% content_tag :div, :id => "flash_#{name}", :class => "alert-message #{name == "notice" ? "success" : name}" do %>
...
0
Jules Copeland

フラッシュメッセージのスタイルを完全に変更したい場合（たとえば、メッセージをフェードさせたくない場合）、次のようにすることもできます。

コントローラ内：

flash[:order_error] = "This is an important error that shouldn't fade!"

次に、フラッシュキーを比較して、適切なスタイルを示します（to_symを使用）。

<% flash.each do |key, msg| %>
  <% if key == 'order_error'.to_sym %>
    <div class="error" id="newErrorStyle"><%= msg %></div>
  <% else %>
    <div class="<%= key %>" id="flash-<%= key %>"><%= msg %></div>
    <% content_tag :script, :type => "text/javascript" do -%>
      setTimeout("new Effect.Fade('flash-<%= key %>');", 8000);
    <% end %>
  <% end %>
<% end %>
0
Dawn Green