How to append class if condition is true in Haml?

We will be looking at two ways of appending a class to an element depending on some condition’s evaluation. Essentially, the logic behind both of them is the same.

  • Using ternary operator
  • Using the “unless” conditional check

Initial code: First, let’s write some basic HAML code. It will contain a style element in the head section. The style element will contain all the styles defined for the classes. Initially, there’s an anchor element in the body section and it has a class “add-background” to it. The style defined for this class in the style element will give a light grey background to the text of the anchor element.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    %head 
        %title Appending class based on condition evaluation
       
        -# defining styles for the classes
        %style
            /.add-background{ background-color: lightgrey; }
       
    %body
        -# an anchor element with class "add-background"
        %a{ :class => "add-background" } Geeks for Geeks

    chevron_right

    
    

  • Output:

Method 1: Suppose we have a class named “make-red” to be appended. The style defined for this class in the style element is such that it will turn the color of the text red. This class will only be appended to the already existing “add-background” if some condition evaluates to true.
Let’s take a boolean variable “flag”. The “make-red” class will be appended only if the value of “flag” is true, otherwise not.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    %head 
        %title Appending class based on condition evaluation
      
        -# defining styles for the classes
        %style
            /.add-background{ background-color: lightgrey; }
            /.make-red{ color: red; }
      
    %body
        -# declaring local boolean type variable 
        - flag = true
          
        -# using ternary operator to append class to the anchor element
        -# if "flag" is true, "make-red" class is appended
        -# else nothing is appended
        %a{ :class => "add-background" + ((flag == true) ? " make-red" : "") } 
        GeeksforGeeks

    chevron_right

    
    

  • Output:

Method 2: Using the “unless” conditional check. This type of check ensures that a certain operation is performed as long some condition is not true. So, as demonstrated below, in this case, the class “make-red” will be appended if “flag” is false does not evaluate to true. That is, if “flag” is false, the class won’t be appended or else it will be appended.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    %head 
        %title Appending class based on condition evaluation
      
        -# defining styles for the classes
        %style
            /.add-background{ background-color: lightgrey; }
            /.make-red{ color: red; }
      
    %body
        -# declaring local boolean type variable 
        - flag = true
          
        -# using the "unless" conditional check to append class to the anchor element
        -# if the "flag" is true, "make-red" class is appended
        -# else nothing is appended
        %a{ :class => "add-background" + (" make-red" unless (flag == false)) } 
        Geeks for Geeks

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.