Semantic UI es un marco de código abierto que nos ofrece clases especiales para crear interfaces de usuario sorprendentes y receptivas. Hace uso de jQuery y CSS para crear interfaces de usuario agradables que son muy parecidas a bootstrap. Tiene muchas clases que se utilizan para diseñar diferentes elementos en la estructura de la página web HTML. En este artículo, aprenderemos sobre las variaciones de calificación de IU semántica.
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. 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 de calificación de datos 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.
Clase de variaciones de tamaño de calificación de IU semántica:
- mini: esta clase se usa para establecer el tamaño en mini.
- tiny: Esta clase se usa para establecer el tamaño en tiny.
- pequeño: Esta clase se usa para establecer el tamaño en pequeño.
- grande: esta clase se utiliza para establecer el tamaño en grande.
- enorme: esta clase se utiliza para establecer el tamaño en enorme.
- masivo: esta clase se utiliza para establecer el tamaño en masivo.
Sintaxis:
<div class="ui size-class rating"
data-rating data-max-rating>
</div>
El siguiente ejemplo ilustra las variaciones de calificación de la interfaz de usuario semántica:
Ejemplo: 1 Este ejemplo muestra algunas opciones básicas de calificación.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>
</head>
<body>
<div class="ui rating"
data-max-rating="6"
data-rating="3"></div>
<br/>
<div class="ui rating"
data-max-rating="6"
data-rating="4"></div>
<br/>
<div class="ui rating"
data-max-rating="6"
data-rating="5">
</div>
<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>
<script>
$('.ui.rating').rating();
</script>
</body>
</html>
Producción:
Variaciones de calificación de la interfaz de usuario semántica
Ejemplo 2: Este ejemplo muestra algunas opciones de calificación de diferentes tamaños.
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>
Size mini:
<div class="ui mini star rating"></div>
<br/>
Size tiny:
<div class="ui tiny star rating"></div>
<br/>
Size small:
<div class="ui small star rating"></div>
<br/>
Size default:
<div class="ui star rating"></div>
<br/>
Size large:
<div class="ui large star rating"></div>
<br/>
Size huge:
<div class="ui huge star rating"></div>
<br/>
Size massive:
<div class="ui massive star rating">
</div>
<script>
$('.ui.rating').rating();
</script>
</body>
</html>
Producción:
Variaciones de calificación de la interfaz de usuario 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