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: