Rails使用Twitter Bootstrap设计I18n Flash消息
Dan*_*iel 9 flash ruby-on-rails devise twitter-bootstrap rails-i18n
你好我是ruby on rails的新手,我很难理解I18n的flash消息.我正在使用devise,rails 4和twitter bootstrap.我明白设计只使用flash[:notice]和flash[:alert].
我可以通过登录和注销来获取适用于我的用户模型的Flash消息.但是,我无法获得注册的Flash错误或忘记密码才能正常显示.它看起来像是默认的错误消息.
我已经看了很多与此相关的问题,我很困惑的方法是用漂亮的CSS显示所有flash消息(错误,成功,通知).
也许答案已经在我的鼻子下的这篇文章中？rails - 设计 - 处理 - devise_error_messages
目前我的flash消息基于如何使用Twitter Bootstrap Rails gem定义Flash通知
这是我的示例:
在'app/views/layouts/application.html.erb'中
<%= render 'layouts/messages' %>
'应用程序/视图/布局/ _messages.html.erb'
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name == :notice ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
如何使用自定义css显示所有Flash消息(错误,成功,通知)？
更新:这篇文章显示了我正在尝试做的正确版本.我遇到的问题是样式看起来不一样.我相信这是因为html标签.
html = <<-HTML
<div class="alert alert-error alert-block"> <button type="button"
class="close" data-dismiss="alert">x</button>
<h4>#{sentence}</h4>
#{messages}
</div>
HTML
知道如何为警报设置相同的样式吗？或者什么标签在CSS中使用？
您可以看到注册^^和登录(下方)页面之间的区别.
UPDATE2
我发了一篇关于我的问题的新帖子 - 可以在这里找到.Dan*_*iel 12
我在github上的设计维基中创建了一个wiki页面,用于如何:使用设计和引导程序集成I18n Flash消息
网站的Flash消息
首先,我们将创建一个渲染视图,使代码简洁.在"app/views/layouts/application.html.erb"中我添加了<%= render 'layouts/messages' %>.
我的文件看起来像:
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= render 'layouts/messages' %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
接下来我们要制作消息文件.在"app/views/layouts/_messages.html.erb"中创建一个新文件并添加:
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<a href="#" data-dismiss="alert" class="close">×</a>
<ul>
<li>
<%= value %>
</li>
</ul>
</div>
<% end %>
这将为我们提供整个站点的Flash消息.
设计的Flash消息
对于设计,您需要覆盖设计处理Flash消息的方式.在"app/helpers/devise_helper.rb"中创建一个名为devise_helper的文件.
在文件内部,您必须创建一个名为devise_error_messages!的方法,该方法是告诉设计如何处理Flash消息的文件的名称.
module DeviseHelper
def devise_error_messages!
return '' if resource.errors.empty?
messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
html = <<-HTML
<div class="alert alert-error alert-block"> <button type="button"
class="close" data-dismiss="alert">x</button>
#{messages}
</div>
HTML
html.html_safe
end
end
接下来,在您的设计视图中,您必须定义出现错误消息的位置.您需要<%= devise_error_messages! %>在设计页面中输入.一个例子是在"app/views/devise/registrations/.new.html.erb"中输入此内容(注册页面)
它应该已经在文件中,但您可以移动代码以自定义它的显示位置.
用于Flash消息的CSS
如果您不想使用默认的奇怪的蓝色和黄色警报,我已设置错误和警报以获得相同的colorand成功并注意具有相同的颜色.我使用红色表示错误和警报,绿色表示成功并注意到.
在我的"app/assets/stylesheets/custom.css.scss"中,我有:
/*flash*/
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: left;
}
.alert-alert {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: left;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: left;
}
.alert-notice {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: left;
}
这是我的2美分.使用case语句来检查flash名称是否是较旧的语法,alert或者 notice将它们更改为success或者danger是否存在,并将其他所有内容保留.
<div class="container">
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= flash_class_name(name) %>" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
</div>
和辅助方法
def flash_class_name(name)
case name
when 'notice' then 'success'
when 'alert' then 'danger'
else name
end
end
如果你在你的应用中使用 Sass，你可以分别扩展 BS 类alert-info和alert-dangerDevise 的alert-notice和alert-alert，如下所示：
.alert-notice {
@extend .alert-info
}
.alert-alert {
@extend .alert-danger
}
通过将此添加到您的 *.scss 中，Devise flash 消息将继承 BSinfo和danger警报的样式。
http://sass-lang.com/guide（扩展/继承部分）
| 归档时间： |
|
| 查看次数： |
8645 次 |
| 最近记录： |