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”. El componente de estadísticas se utiliza para ampliar datos particulares de su sitio web. Los usuarios también pueden posicionar las estadísticas según sus requisitos. Veamos esta variación estadística.
Semantic-UI Statistics nos ofrece 2 tipos de estadísticas con 6 tipos de variación para esos dos Horizontal, Coloreada, Invertida, Dividida uniformemente, Flotante, Borrada. En este artículo, conoceremos la variante dividida uniformemente de las estadísticas de la interfaz de usuario semántica.
Estadísticas de variación dividida uniformemente ofrece decidir cuántas estadísticas desea mostrar en una fila. Una página web puede contener un montón de estadísticas. Puedes dividirlos con un número preciso usando esta variación. Crearemos una interfaz de usuario que muestre la variación dividida uniformemente de las estadísticas.
Estadísticas de interfaz de usuario semántica Clase de variante dividida uniformemente:
- *número: Este es un contenedor de valor numérico que divide el contenedor en el mismo ancho del componente.
Sintaxis:
<div class="ui *number statistics"> <div class="statistic"> .... </div> <div class="statistic"> .... </div> .... </div>
El siguiente ejemplo ilustra la variante dividida uniformemente de las estadísticas de la interfaz de usuario semántica:
Ejemplo 1: este ejemplo muestra estadísticas divididas uniformemente utilizando la clase de estadísticas junto con cuatro estadísticas seguidas.
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 evenly divided statistics.</p> </b> <div class="ui four statistics"> <div class="statistic"> <div class="value"> 1 </div> <div class="label"> Label 1 </div> </div> <div class="statistic"> <div class="value"> 2 </div> <div class="label"> Label 2 </div> </div> <div class="statistic"> <div class="value"> 3 </div> <div class="label"> Label 3 </div> </div> <div class="statistic"> <div class="value"> 4 </div> <div class="label"> Label 4 </div> </div> </div> </div> </body> </html>
Producción:
Variante dividida uniformemente de las estadísticas de la interfaz de usuario semántica
Ejemplo 2: este ejemplo muestra estadísticas divididas uniformemente utilizando la clase de estadísticas junto con dos estadísticas seguidas.
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 evenly divided statistics.</p> </b> <div class="ui two statistics"> <div class="statistic"> <div class="value"> 1 </div> <div class="label"> Label 1 </div> </div> <div class="statistic"> <div class="value"> 2 </div> <div class="label"> Label 2 </div> </div> <div class="statistic"> <div class="value"> 3 </div> <div class="label"> Label 3 </div> </div> <div class="statistic"> <div class="value"> 4 </div> <div class="label"> Label 4 </div> </div> </div> </div> </body> </html>
Producción:
Variante dividida uniformemente de las estadísticas de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/statistic.html#evenly-divided
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA