Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es la “ estadística ”. Las estadísticas se utilizan para varios propósitos en una página web. Se utiliza para ampliar datos particulares de su sitio web. El usuario puede necesitar mostrar diferentes estadísticas en diferentes variaciones según sus requisitos. Para representar la importancia de los datos estadísticos, su variación puede variar.
Variaciones de las estadísticas de la interfaz de usuario semántica:
- Horizontal : esta variación se utiliza para mostrar estadísticas en la dimensión horizontal.
- Coloreado : esta variación se usa para mostrar estadísticas en diferentes colores como rojo, naranja, etc.
- Invertido : esta variación se utiliza para invertir las estadísticas (en cuanto al color).
- Dividido uniformemente : esta variación se utiliza para decidir cuántas estadísticas desea mostrar en una fila.
- Flotante : esta variación se utiliza para hacer que las estadísticas floten a la izquierda o a la derecha del contenido.
- Tamaño : esta variación se utiliza para hacer que las estadísticas varíen de tamaño. Las clases utilizadas son estadísticas mini, tiny, small.
Sintaxis:
<div class="ui Statistics-Variation">
<div class="ui ..">
.....
</div>
</div>
Ejemplo 1: este ejemplo muestra algunas de las clases de estadísticas de interfaz de usuario semántica. Consulte la salida para una mejor comprensión.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Statistics Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Statistics Variations</p> </b> <hr><br /> <span>Horizontal Statistic : </span> <div class="ui horizontal statistic" style="margin-right:120px"> <div class="value"> 1 </div> <div class="label"> Label 1 </div> </div> <span>Colored Statistic : </span> <div class="ui green statistic"> <div class="value"> 2 </div> <div class="label"> Label 2 </div> </div> <div class="ui red statistic"> <div class="value"> 3 </div> <div class="label"> Label 3 </div> </div> <div class="ui orange statistic"> <div class="value"> 4 </div> <div class="label"> Label 4 </div> </div> <br /> <div class="ui inverted segment"> <p>Inverted Statistic : </p> <div class="ui inverted statistic"> <div class="value"> 5 </div> <div class="label"> Label 5 </div> </div> <div class="ui green inverted statistic"> <div class="value"> 6 </div> <div class="label"> Label 6 </div> </div> <div class="ui inverted statistic"> <div class="value"> 7 </div> <div class="label"> Label 7 </div> </div> </div> <br /> <p>Evenly Divided Statistic : </p> <div class="ui four statistics"> <div class="statistic"> <div class="value"> 8 </div> <div class="label"> Label 8 </div> </div> <div class="statistic"> <div class="value"> 9 </div> <div class="label"> Label 9 </div> </div> <div class="statistic"> <div class="value"> 10 </div> <div class="label"> Label 10 </div> </div> <div class="statistic"> <div class="value"> 11 </div> <div class="label"> Label 11 </div> </div> </div> <br /> <span>Floated Statistic : </span> <div class="ui segment"> <div class="ui left floated statistic"> <div class="value"> 12 </div> <div class="label"> Floated </div> </div> <p>As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews.You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <br /> <span>Size Statistic : </span> <div class="ui mini statistic"> <div class="value"> 13 </div> <div class="label"> Mini </div> </div> <div class="ui small statistic"> <div class="value"> 14 </div> <div class="label"> Small </div> </div> <div class="ui large statistic"> <div class="value"> 15 </div> <div class="label"> Large </div> </div> </div> </body> </html>
Producción:
Variaciones de las estadísticas de la interfaz de usuario semántica
Ejemplo 2: este ejemplo también muestra algunas de las clases de estadísticas de IU semánticas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Statistics Variations</p> </b> <hr><br /> <span>Horizontal Statistic : </span> <div class="ui horizontal statistic" style="margin-right:120px"> <div class="value"> 1 </div> <div class="label"> One </div> </div> <span>Colored Statistic : </span> <div class="ui teal statistic"> <div class="value"> 2 </div> <div class="label"> Teal </div> </div> <div class="ui blue statistic"> <div class="value"> 3 </div> <div class="label"> Blue </div> </div> <div class="ui violet statistic"> <div class="value"> 4 </div> <div class="label"> Violet </div> </div> <br /> <div class="ui inverted segment"> <p>Inverted Statistic : </p> <div class="ui green inverted statistic"> <div class="value"> 5 </div> <div class="label"> Five </div> </div> <div class="ui white inverted statistic"> <div class="value"> 6 </div> <div class="label"> Six </div> </div> <div class="ui green inverted statistic"> <div class="value"> 7 </div> <div class="label"> Seven </div> </div> </div> <br /> <p>Evenly Divided Statistic : </p> <div class="ui two statistics"> <div class="statistic"> <div class="value"> 8 </div> <div class="label"> Eight </div> </div> <div class="statistic"> <div class="value"> 9 </div> <div class="label"> Nine </div> </div> <div class="statistic"> <div class="value"> 10 </div> <div class="label"> Ten </div> </div> <div class="statistic"> <div class="value"> 11 </div> <div class="label"> Eleven </div> </div> </div> <br /> <span>Floated Statistic : </span> <div class="ui segment" style="padding-bottom:20px"> <div class="ui right floated statistic"> <div class="value"> 12 </div> <div class="label"> Floated </div> </div> <p>As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews.You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <br /> <span>Size Statistic : </span> <div class="ui large statistic"> <div class="value"> 13 </div> <div class="label"> large </div> </div> <div class="ui huge statistic"> <div class="value"> 14 </div> <div class="label"> Huge </div> </div> </div> </body> </html>
Producción:
Variaciones de las estadísticas de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/statistic.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA