La interfaz de usuario semántica es un marco de interfaz de usuario que ofrece un montón de herramientas de interfaz de usuario para diseñar páginas web. La representación del contenido en la interfaz de usuario se mejora a través de este marco. Tiene un montón de componentes para que los usuarios diseñen páginas web. Uno de ellos es “Estadísticas”. Se utiliza para ampliar datos particulares en una página web. Hay diferentes formas de representación de contenido en una estadística. Veamos las estadísticas de contenido de la etiqueta.
El contenido de la etiqueta de estadísticas de IU semántica contiene una etiqueta que proporciona una referencia para el 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. Ahí es cuando el contenido de la etiqueta nos ayuda. Puede haber un montón de datos para ser utilizados como estadísticas. Para diferenciarlos se pueden poner etiquetas en cada uno de ellos. Diseñaremos una interfaz de usuario que muestre las estadísticas de contenido de la etiqueta.
Clase de etiqueta de contenido de estadísticas de interfaz de usuario semántica:
- etiqueta: esta clase se utiliza para proporcionar contexto para el valor presentado.
Sintaxis:
<div class="ui statistic">
<div class="value">
....
</div>
<div class="label">
....
</div>
</div>
El siguiente ejemplo ilustra la etiqueta de contenido de estadísticas de la interfaz de usuario semántica:
Ejemplo 1: Este ejemplo demuestra la representación de la etiqueta utilizando la clase de etiqueta .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI statistics with/without label. </p> </b> <div class="ui statistics"> <div class="statistic"> <div class="value"> GFG </div> <div class="label"> Website </div> </div> <div class="statistic"> <div class="value"> GFG </div> </div> </div> </div> </body> </html>
Producción:
Etiqueta de contenido de estadísticas de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra el conjunto de datos, cada uno de los cuales tiene una representación de etiqueta usando la clase de etiqueta .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI statistics with label.</p> </b> <div class="ui statistics"> <div class="statistic"> <div class="value"> 150 </div> <div class="label"> Likes </div> </div> <div class="statistic"> <div class="value"> 3000 </div> <div class="label"> Views </div> </div> <div class="statistic"> <div class="value"> 100 </div> <div class="label"> Comments </div> </div> </div> </div> </body> </html>
Producción:
Etiqueta de contenido de estadísticas de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/statistic.html#label
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA