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 corazón.
Los usuarios pueden recibir comentarios en forma de calificación cardíaca. Los usuarios pueden pasar el cursor sobre los corazones para expresar sus preferencias. Los usuarios pueden incluso decidir la cantidad de corazones que se mostrarán para captar el interés del usuario. Se puede hacer usando la «calificación máxima de datos». Establece el límite de corazones que se mostrarán (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 la «calificación de datos». Puede agregar el tipo de calificación de corazón 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 corazón:
- corazón: Esta clase se utiliza para establecer el tipo de calificación de corazón.
Sintaxis:
<div class="ui heart rating" ></div>
Ejemplo: Este ejemplo demuestra el tipo de calificación cardíaca. 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 heart 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 heart rating"
data-rating="7"
data-max-rating="10">
</div>
<script>
$('.rating').rating();
</script>
</div>
</body>
</html>
Producción :
Corazón de tipo de calificación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/rating.html#heart
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA