Tipos de estadísticas de interfaz de usuario semántica

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 “Estadísticas”. Hay diferentes tipos de estadísticas.

Crearemos una interfaz de usuario para mostrar los diferentes tipos de estadísticas. Después de crear esta plantilla básica, puede trabajar con diferentes componentes de la interfaz de usuario semántica.

Clase de tipos de estadísticas de interfaz de usuario semántica:

estadística: Un único valor estadístico basado en la posición de la etiqueta por encima o por debajo de ella.
grupo de estadísticas : Este es un conjunto o grupo de estadísticas que muestran contenido relacionado.

Sintaxis:

<div class="ui Statistic-Types-class">  
     <div class="ui statistic">
        ....
     </div>
     <div class="ui statistic">
        ....
     </div>
     ....
</div>

Ejemplo 1: Este ejemplo demuestra las estadísticas individuales usando la clase de 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 statistic</p>
 
         </b>
         <div class="ui statistic">
            <div class="value">
               1
            </div>
            <div class="label">
              Label 1
            </div>
         </div>
         <br/>
         <div class="ui statistic">
            <div class="label">
               Label 2
            </div>
            <div class="value">
               2
            </div>
         </div>
      </div>
   </body>
</html>

Producción:

Ejemplo 2: Este ejemplo demuestra las estadísticas de grupo utilizando la clase de estadísticas .

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 Group</p>
 
         </b>
         <div class="ui statistics">
            <div class="statistic">
               <div class="value">
                  150
               </div>
               <div class="label">
                  Likes
               </div>
            </div>
            <div class="statistic">
               <div class="value">
                  3000
               </div>
               <div class="label">
                  Views
               </div>
            </div>
            <div class="statistic">
               <div class="value">
                  100
               </div>
               <div class="label">
                  Comments
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Producción:

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

HTML

HTML

Deja una respuesta Cancelar la respuesta