La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
La interfaz de usuario semántica tiene un componente de estadísticas para ampliar datos particulares de su sitio web. Los usuarios también pueden elegir un color particular para una estadística específica. Veamos esta variación de las estadísticas.
Variaciones de las estadísticas de la interfaz de usuario semántica La variante de color se utiliza para mostrar diferentes colores según su uso. Cada estadística se puede mostrar en un color único para representar su importancia. Una sola o un grupo de estadísticas que muestran contenido relacionado se pueden mostrar en diferentes colores. Crearemos una interfaz de usuario para mostrar la variación coloreada de las estadísticas.
Variaciones de estadísticas de interfaz de usuario semántica Clase de variante coloreada:
- rojo: esta clase se utiliza para establecer el color de las estadísticas en rojo.
- naranja: esta clase se utiliza para establecer el color de las estadísticas en naranja.
- amarillo: esta clase se utiliza para establecer el color de las estadísticas en amarillo.
- oliva: esta clase se utiliza para establecer el color de las estadísticas en la aceituna.
- verde: esta clase se utiliza para establecer el color de las estadísticas en verde.
- verde azulado: esta clase se utiliza para establecer el color de las estadísticas en verde azulado.
- azul: esta clase se utiliza para establecer el color de las estadísticas en azul.
- violeta: esta clase se utiliza para establecer el color de las estadísticas en violeta.
- morado: esta clase se utiliza para establecer el color de las estadísticas en rojo.
- rosa: esta clase se utiliza para establecer el color de las estadísticas en rosa.
- marrón: esta clase se utiliza para establecer el color de las estadísticas en marrón.
- gris: esta clase se utiliza para establecer el color de las estadísticas en gris.
Sintaxis:
<div class="ui Colored-Variant-Class statistic"> ... </div>
Ejemplo: Este ejemplo demuestra la variación de color de las estadísticas al poner nombres de colores junto con la clase de estadística . Puedes ver en la primera fila los tres colores primarios fundamentales y en la siguiente fila los colores secundarios. Hay más colores que puede usar para diseñar estadísticas de IU semánticas.
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"> <center> <h1>GeeksforGeeks</h2> <strong>Semantic-UI Statistics Variations Colored Variant</strong> </center> <div class="ui four statistics"> <div class="red statistic"> <div class="value"> 1 </div> <div class="label"> Red </div> </div> <div class="orange statistic"> <div class="value"> 2 </div> <div class="label"> Orange </div> </div> <div class="yellow statistic"> <div class="value"> 3 </div> <div class="label"> Yellow </div> </div> <div class="olive statistic"> <div class="value"> 4 </div> <div class="label"> Olive </div> </div> <div class="green statistic"> <div class="value"> 5 </div> <div class="label"> Green </div> </div> <div class="teal statistic"> <div class="value"> 6 </div> <div class="label"> Teal </div> </div> <div class="blue statistic"> <div class="value"> 7 </div> <div class="label"> Blue </div> </div> <div class="violet statistic"> <div class="value"> 8 </div> <div class="label"> Violet </div> </div> <div class="purple statistic"> <div class="value"> 9 </div> <div class="label"> Purple </div> </div> <div class="pink statistic"> <div class="value"> 10 </div> <div class="label"> Pink </div> </div> <div class="brown statistic"> <div class="value"> 11 </div> <div class="label"> Brown </div> </div> <div class="grey statistic"> <div class="value"> 12 </div> <div class="label"> Grey </div> </div> </div> </div> </body> </html>
Salida: Puede ver las estadísticas en diferentes colores en la imagen a continuación. Puede diseñar sus datos en el color que desee y mostrarlos en su página web.
Variaciones de las estadísticas de la interfaz de usuario semántica Variante coloreada
Referencia: https://semantic-ui.com/views/statistic.html#colored
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA