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.
La interfaz de usuario semántica ofrece un componente de calificación para que los usuarios transmitan sus intereses sobre un tema determinado de 1 a 5 en general. Se utiliza para mostrar el nivel de preferencia del usuario con respecto a algún contenido. Existen diferentes representaciones de Rating. Uno de ellos es de tipo estrella.
Los usuarios pueden recibir comentarios en forma de calificaciones con estrellas. Los usuarios pueden pasar el cursor sobre las estrellas para expresar sus preferencias. Los usuarios pueden incluso decidir la cantidad de estrellas que se mostrarán para captar el interés del usuario. Se puede hacer usando el «data-max-rating» . Establece el límite de estrellas a mostrar (el límite máximo superior). También puede agregar la calificación predeterminada que se mostrará cuando el usuario cargue el contenido por primera vez. Se puede hacer usando el “data-rating” . Puede agregar el tipo de calificación de estrellas a cualquier contenido, ya sea debajo de una imagen o un texto o cualquier contenido en particular donde desee saber cuánto le gustó al usuario.
Tipo de calificación de IU semántica Clase de estrellas:
- estrella: Esta clase se utiliza para establecer el tipo de estrella de calificación.
Sintaxis:
<div class="ui star rating"></div>
El siguiente ejemplo ilustra el tipo de estrella de calificación de interfaz de usuario semántica:
Ejemplo: Este ejemplo demuestra el tipo de clasificación por estrellas. Le estamos pidiendo al usuario que exprese su nivel de interés mediante una pregunta. En este ejemplo, data-max-rating se establece en 10 y data-rating se establece en 7 como promedio. También se agrega un script para que la interfaz de usuario funcione. Puede personalizar el script según sus necesidades.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<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>
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI star rating type.</p>
</b>
<br />
<p>
On a rate of 1-10 how much would you
recommend GFG to your colleague ?
</p>
<br />
<div class="ui star rating"
data-rating="7"
data-max-rating="10"></div>
<script>
$('.rating').rating();
</script>
</div>
</body>
</html>
Salida: Puede ver el funcionamiento del código anterior en forma de GIF a continuación. El usuario interactúa con el tipo de calificación de estrellas y cómo responde la interfaz de usuario cuando el usuario pasa el mouse sobre él. El usuario se desplaza sobre las estrellas y cambia el valor de 7 a 10.
Estrella de tipo de calificación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/rating.html#star
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA