Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Puede utilizar una variedad de componentes para diseñar su sitio web. Uno de ellos es “ Estadísticas”.
La interfaz de usuario semántica tiene un componente de estadísticas para ampliar datos particulares de su sitio web. Veamos una variación de la misma.
La variación estadística horizontal se utiliza para mostrar los datos ampliados y su etiqueta en forma horizontal. Normalmente, la etiqueta viene debajo del valor, pero aquí el usuario puede mostrar el valor y la etiqueta en una fila. Se puede mostrar un grupo o grupo de estadísticas que muestran contenido relacionado en una fila. Crearemos una interfaz de usuario para mostrar la variación estadística horizontal.
Variaciones de estadísticas de interfaz de usuario semántica Clase de variante de estadística horizontal:
- estadística horizontal: Esta clase se utiliza para hacer las estadísticas en la dimensión horizontal.
Sintaxis:
<div class="ui horizontal statistic">
<div class="value">
.....
</div>
<div class="label">
.....
</div>
</div>
El siguiente ejemplo ilustra la variante de estadística horizontal de variaciones de estadísticas de interfaz de usuario semántica:
Ejemplo 1: Este ejemplo demuestra la estadística horizontal única utilizando la clase horizontal .
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 horizontal statistic</p> </b> <div class="ui horizontal statistic"> <div class="value"> 98.6 F </div> <div class="label"> Temperature </div> </div> </div> </body> </html>
Producción:
Variaciones de estadísticas de interfaz de usuario semántica Variante de estadística horizontal
Ejemplo 2: Este ejemplo muestra un grupo de estadísticas horizontales usando la clase horizontal .
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 horizontal statistics</p> </b> <div class="ui horizontal statistics"> <div class="statistic"> <div class="value"> 300 </div> <div class="label"> Views </div> </div> <div class="statistic"> <div class="value"> 200 </div> <div class="label"> Likes </div> </div> <div class="statistic"> <div class="value"> 100 </div> <div class="label"> Comments </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de estadísticas de interfaz de usuario semántica Variante de estadística horizontal
Referencia : https://semantic-ui.com/views/statistic.html#horizontal-statistic
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA