La interfaz de usuario semántica es un marco de código abierto que ofrece una variedad de componentes para hacer que su interfaz de usuario sea más significativa. 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. Los valores de las estadísticas se pueden mostrar en diferentes colores según los requisitos. Los usuarios también pueden mostrar las estadísticas en un fondo oscuro. Veamos esta variación de las estadísticas.
Si desea mostrar estadísticas sobre fondo negro, los usuarios pueden usar estadísticas invertidas. Una sola o un grupo de estadísticas que muestran contenido relacionado se pueden mostrar en un fondo oscuro. Crearemos una interfaz de usuario para mostrar la variación invertida de las estadísticas.
Clase de variación invertida de estadísticas de interfaz de usuario semántica:
- invertido: esta clase se utiliza para hacer que las estadísticas se inviertan (en cuanto al color).
Sintaxis:
<div class="ui inverted segment">
<div class="ui inverted statistic">
.....
</div>
</div>
Ejemplo 1: Este ejemplo demuestra la variación invertida de las estadísticas mediante el uso de la clase invertida .
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 class="ui header green">GeeksforGeeks</h2> <b> Semantic-UI Statistics Variations Inverted Variant </b> <div class="ui inverted segment"> <div class="ui inverted statistic"> <div class="value"> 1 </div> <div class="label"> Label 1 </div> </div> <div class="ui green inverted statistic"> <div class="value"> 2 </div> <div class="label"> Label 2 </div> </div> <div class="ui inverted statistic"> <div class="value"> 3 </div> <div class="label"> Label 3 </div> </div> </div> </div> </body> </html>
Salida: Puede ver en la primera fila todas las estadísticas en el fondo oscuro. Todos los valores de las estadísticas están en el fondo oscuro ya que las estadísticas están etiquetadas con clase invertida. Se puede interpretar fácilmente a través del código que las estadísticas de fondo oscuro con color blanco son visibles como se muestra en la figura al agregar la clase invertida .
Variaciones de las estadísticas de la interfaz de usuario semántica Variante invertida
Referencia: https://semantic-ui.com/views/statistic.html#inverted
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA