La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Las estadísticas se utilizan para enfatizar el valor de una etiqueta. Normalmente se usa para mostrar vistas, me gusta y suscripciones en una página web.
El contenido del valor de las estadísticas de la interfaz de usuario semántica contiene un valor. Supongamos que el usuario desea resaltar datos en la interfaz de usuario; en algunos casos, también debe indicar a qué parte del contenido se refiere. El contenido de valor contiene números, texto, iconos, imágenes o valor de texto.
Clases de contenido de valor de estadísticas de interfaz de usuario semántica:
- valor: Esta clase se utiliza para definir el valor de las estadísticas.
Sintaxis: agregue la clase de valor al contenedor div con cualquier contenido de la siguiente manera:
<div class="ui statistic">
<div class="value"> ... </div>
<div class="label"> ... </div>
</div>
El siguiente ejemplo ilustra el valor del contenido de las estadísticas de la interfaz de usuario semántica:
Ejemplo: En el siguiente ejemplo, tenemos diferentes estadísticas con diferentes valores como numéricos, texto, íconos.
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"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Semantic-UI Statistics Value content </h2> <div class="ui small statistics" id="gfgstats"> <div class="statistic"> <div class="value"> 12,330 </div> <div class="label"> Views </div> </div> <div class="statistic"> <div class="value"> GeeksforGeeks </div> <div class="label"> A computer science portal for geeks </div> </div> <div class="statistic"> <div class="value"> <i class="globe loading green icon"> </i> </div> <div class="label"> Views </div> </div> </div> </center> </div> </body> </html>
Producción
Valor de contenido de estadísticas de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/statistic.html#value
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA