Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
La calificación muestra el interés del usuario en el contenido dado.
Veamos algunos ejemplos
Ejemplo:
Clasificación sencilla
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
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=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.rating').rating();
</script>
</body>
</html>
data-max-rating es la calificación máxima que desea.
Producción:
Ejemplo:
Clasificación de estrellas
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
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>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.rating').rating();
</script>
</body>
</html>
data-rating es la calificación que ya desea.
Producción:
Ejemplo:
Valoración del corazón
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
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>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.rating').rating();
</script>
</body>
</html>
Producción:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h3>Rating to Image</h3>
<img class="ui medium rounded image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200517214450/image30.png">
<div class="ui heart rating"
data-rating="4" data-max-rating="5">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.rating').rating();
</script>
</body>
</html>
Producción:
Ejemplo:
Clasificación de diferentes tamaños
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
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>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.rating').rating();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA