Semantic-UI Rating Types
Last Updated :
21 Apr, 2022
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
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
Reference: https://semantic-ui.com/modules/rating.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...