Skip to content
Related Articles

Related Articles

Semantic-UI Rating Variations

Improve Article
Save Article
  • Last Updated : 22 Feb, 2022
Improve Article
Save Article

Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML web page structure. In this article, we will learn about the Semantic UI Rating Variations.

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. To create a beautiful rating, we use the UI and rating classes of the Semantic UI. The data-max-rating argument lets us specify the maximum rating to be used. The default value is 1. The data-rating argument lets us specify the default rating. We use the rating() function in the script to initialize the rating element in Semantic UI.

Semantic UI Rating Size Variations Class:

  • mini: This class is used to set the size into mini.
  • tiny: This class is used to set the size into tiny.
  • small: This class is used to set the size into small.
  • large: This class is used to set the size into large.
  • huge: This class is used to set the size into huge.
  • massive: This class is used to set the size into massive.

Syntax:

<div class="ui size-class rating" 
    data-rating data-max-rating>
</div>

Below example illustrates the Semantic-UI Rating Variations:

Example: 1 This example shows a few basic rating options.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    />
</head>
 
<body>
    <div class="ui rating"
         data-max-rating="6"
         data-rating="3"></div>
    <br/>
    <div class="ui rating"
         data-max-rating="6"
         data-rating="4"></div>
    <br/>
    <div class="ui rating"
         data-max-rating="6"
         data-rating="5">
    </div>
    <script src=
    </script>
     
    <script src=
    </script>
    <script>
        $('.ui.rating').rating();
    </script>
</body>
 
</html>


Output:

Semantic-UI Rating Variations

Semantic-UI Rating Variations

Example 2: This example shows a few rating options of different sizes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    />
      <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    Size mini:
      <div class="ui mini star rating"></div>
    <br/>
    Size tiny: 
      <div class="ui tiny star rating"></div>
    <br/>
    Size small: 
      <div class="ui small star rating"></div>
    <br/>
    Size default:  
      <div class="ui star rating"></div>
    <br/>
    Size large:  
      <div class="ui large star rating"></div>
    <br/>
    Size huge:  
      <div class="ui huge star rating"></div>
    <br/>
    Size massive:  
      <div class="ui massive star rating">
    </div>
    <script>
        $('.ui.rating').rating();
    </script>
</body>
 
</html>


Output:

Semantic-UI Rating Variations

Semantic-UI Rating Variations

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!