Skip to content
Related Articles

Related Articles

Semantic-UI Rating Types

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

The rating shows the interest of the user in the given content. The option to give or accept a rating is one of the primary features of current web applications. This helps the organization in understanding the needs and feedback of users. In this article, we will learn about the Semantic UI Rating Types. 

Semantic UI Rating Types class:

  • rating: This is the basic rating.
  • star: The star icon is used as the rating.
  • heart: The heart icon is used as the rating.

Syntax:

<div class="ui Rating-Types-class" 
    data-rating="1" data-max-rating="3">
</div>

Below examples illustrate the Semantic-UI Rating Types

Example 1: This example shows a few basic rating options.  To create a beautiful rating, we use the ui and rating classes of the Semantic UI. The data-max-rating argument allows us to specify the maximum rating to be used. The default value is 1. The data-rating argument allows us to specify the default rating. We use the rating() function in the script to initialize the rating element in Semantic UI.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
         <strong>Semantic UI rating types</strong>
         <br>
        <div class="ui rating"
             data-max-rating="1">
        </div>
        <br/>
        <div class="ui rating"
             data-max-rating="2">
        </div>
        <br/>
        <div class="ui rating"
             data-max-rating="3">
        </div>
        <br/>
        <div class="ui rating"
             data-max-rating="4">
        </div>
        <br/>
        <div class="ui rating"
             data-max-rating="5">
        </div>
        <br/>
        <div class="ui rating"
             data-max-rating="6">
        </div>
    </center>
    <script>
        $('.ui.rating').rating();
    </script>
</body>
 
</html>


Output:

Semantic-UI Rating Types

Semantic-UI Rating Types

Example 2: This example shows all three types of ratings. First is the basic type of rating that is shown in the above example, it is also the default type. The other two are star-shaped and heart-shaped. To add a star-shaped rating we add the class star to the div and to add a heart-shaped rating, we add the class heart to the div.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
   <center>
       <h2 style="color:green">GeeksforGeeks</h2>
        <strong>Semantic UI rating types</strong>
        <br>
        <h3>Default Rating:</h3>
        <div class="ui rating"
             data-max-rating="10">
        </div>
        <br/>
        <h3>Star Rating:</h3>
        <div class="ui star rating"
             data-max-rating="10">
        </div>
        <br/>
        <h3>Heart Rating:</h3>
        <div class="ui heart rating"
             data-max-rating="10">
        </div>
    </center>
     
    <script>
        $('.ui.rating').rating();
    </script>
</body>
 
</html>


Output:

Semantic-UI Rating Types

Semantic-UI Rating Types

Reference: https://semantic-ui.com/modules/rating.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!