Semantic-UI Rating Types
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.
<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.
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.