Semantic-UI Rating Variations
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.
<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.
Example 2: This example shows a few rating options of different sizes.