To add a class to an element rather than replacing its existing classes, use the += operator instead. Note, it is important to prefix the new classname with space; otherwise, one of the existing classes of an element is lost.
To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.
It is needed to stylize HTML elements – including changing colors, fonts, or the size of a text. If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size.
I use the first way, but with a slightly more succinct syntax:
<div class="<%= 'ok' if @status == 'success' %>">
Though usually you should represent success with boolean true
or a numeric record ID, and failure with boolean false
or nil
. This way you can just test your variable:
<div class="<%= 'ok' if @success %>">
A second form using the ternary ?:
operator is useful if you want to choose between two classes:
<div class="<%= @success ? 'good' : 'bad' %>">
Finally, you can use Rail's record tag helpers such as div_for
, which will automagically set your ID and class based on the record you give it. Given a Person
with id 47:
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
The problem with the standard approach is that it requires logic in the form of if
statements or ternaries in the view. If you have multiple conditional CSS classes mixed with default classes, then you need to put that logic into a string interpolation or ERB tag.
Here's an updated approach that avoids putting any logic into the views:
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string
methodThe class_string
helper takes a hash with key/value pairs consisting of CSS class name strings and boolean values. The result of the method is a string of classes where the boolean value evaluated to true.
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"
This helper can be used within ERB
tags or with Rails helpers such as link_to
.
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
<% div_for @person, class: class_string(ok: @success) do %>
<% end %>
<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>
For use cases where a ternary would be necessary (e.g. @success ? 'good' : 'bad'
), pass an array where the first element is the class for true
and the other is for false
<div class="<%= [:good, :bad] => @success %>">
This technique is inspired by an add-on called classNames
(formerly known as classSet
) from Facebook’s React
front-end framework.
As of now, the class_names
function does not exist in Rails, but this article shows you how to add or implement it into your projects.
Rails 6.1 introduces a class_names
view helper
to make it easier to conditionally apply class names
in views.
Before:
<div class="<%= item.for_sale? ? 'active' : '' %>">
After:
<div class="<%= class_names(active: item.for_sale?) %>">
More examples:
class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"
Sources:
class_names
docs.You can also use the content_for helper, especially if the DOM is located in a layout and you want to set the css class depending on the partial loaded.
On the layout:
%div{class: content_for?(:css_class) ? yield(:css_class) : ''}
On the partial:
- content_for :css_class do
my_specific_class
That is it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With