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 que los usuarios diseñen páginas web. Uno de ellos es “Estadísticas”. Hay diferentes formas de representación de contenido en una estadística.
Diseñemos una interfaz de usuario que muestre el contenido de diferentes estadísticas. Después de crear este diseño, puede trabajar con diferentes componentes de la interfaz de usuario semántica.
Clase de contenido de estadísticas de interfaz de usuario semántica:
- valor : el valor se puede representar a través de un icono, texto, numérico o imagen.
- etiqueta : las estadísticas contienen una etiqueta que proporciona una referencia para el valor.
Sintaxis:
<div class="ui statistic">
<div class="value">
....
</div>
<div class="label">
....
</div>
</div>
Ejemplo 1: Este ejemplo demuestra las diferentes representaciones de valores utilizando la clase estadística .
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 value. </p> </b> <div class="ui statistics"> <div class="statistic"> <div class="value"> 100 </div> <div class="label"> Numeric </div> </div> <div class="statistic"> <div class="text value"> Hi<br> Geeks </div> <div class="label"> Text </div> </div> <div class="statistic"> <div class="value"> <i class="arrow right icon"></i> </div> <div class="label"> Icon </div> </div> <div class="statistic"> <div class="value"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" class="ui circular inline image"> </div> <div class="label"> Image </div> </div> </div> </div> </body> </html>
Producción:
Contenido de estadísticas de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra la representación de la etiqueta utilizando la clase estadística .
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:
Contenido de estadísticas de 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