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 usar 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. La opción de dar o aceptar una calificación es una de las características principales de las aplicaciones web actuales. Esto ayuda a la organización a comprender las necesidades y los comentarios de los usuarios. En este artículo, aprenderemos sobre los tipos de calificación de IU semántica.
Clase de tipos de calificación de IU semántica:
- calificación: Esta es la calificación básica.
- estrella : el icono de estrella se utiliza como calificación.
- corazón : El icono del corazón se utiliza como calificación.
Sintaxis:
<div class="ui Rating-Types-class"
data-rating="1" data-max-rating="3">
</div>
Los siguientes ejemplos ilustran los tipos de calificación de IU semántica
Ejemplo 1: Este ejemplo muestra algunas opciones básicas de calificación. Para crear una calificación hermosa, usamos la interfaz de usuario y las clases de calificación de la interfaz de usuario semántica. El argumento data-max-rating nos permite especificar la calificación máxima que se utilizará. El valor predeterminado es 1. El argumento data-rating nos permite especificar la calificación predeterminada. Usamos la función rating() en el script para inicializar el elemento de calificación en la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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>
Producción:
Tipos de calificación de IU semántica
Ejemplo 2: Este ejemplo muestra los tres tipos de calificaciones. El primero es el tipo básico de calificación que se muestra en el ejemplo anterior, también es el tipo predeterminado. Los otros dos tienen forma de estrella y de corazón. Para agregar una calificación en forma de estrella, agregamos la estrella de la clase al div y para agregar una calificación en forma de corazón, agregamos el corazón de la clase al div.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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>
Producción:
Tipos de calificación de IU semántica
Referencia: https://semantic-ui.com/modules/rating.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA