Semantic-UI | Rating
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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.
Let’s see some examples
Example:
Simple Rating
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Simple Rating</h3> <div class="ui rating" data-max-rating="1"></div> </div> </div> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> <script> $('.rating').rating(); </script> </body> </html> |
data-max-rating is the max rating you want.
Output:
Example:
Star Rating
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Star Rating</h3> <div class="ui star rating" data-rating="3"> </div> </div> </div> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> <script> $('.rating').rating(); </script> </body> </html> |
data-rating is the rating that you want already.
Output:
Example:
Heart Rating
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Heart Rating</h3> <div class="ui heart rating" data-rating="4" data-max-rating="5"> </div> </div> </div> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src= </script> <script> $('.rating').rating(); </script> </body> </html> |
Output:
Example:
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Rating to Image</h3> <img class="ui medium rounded image" src= <div class="ui heart rating" data-rating="4" data-max-rating="5"> </div> </div> </div> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src= </script> <script> $('.rating').rating(); </script> </body> </html> |
Output:
Example:
Different Size Rating
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Various size Rating</h3> <h4>Mini</h4> <div class="ui mini star rating"></div> <h4>Tiny</h4> <div class="ui tiny star rating"></div> <h4>Small</h4> <div class="ui small star rating"></div> <h4>Normal</h4> <div class="ui star rating"></div> <h4>Large</h4> <div class="ui large star rating"></div> <h4>Huge</h4> <div class="ui huge star rating"></div> <h4>Massive</h4> <div class="ui massive star rating"></div> </div> integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src= </script> <script> $('.rating').rating(); </script> </body> </html> |
Output:
Please Login to comment...