Grupo de estadísticas de tipo de estadística 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. 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, incluidas las estadísticas de grupo. 

El grupo de estadísticas de tipo de estadística de interfaz de usuario semántica se utiliza para crear un grupo de estadísticas. Hay 2 tipos de estadísticas, una es la estadística regular y la estadística de grupo. En este artículo, conoceremos el Grupo de Estadística.

Clase de tipo de grupo de estadísticas de IU semántica: 

Sintaxis:

<div class="ui statistics">  
....
</div>

El siguiente ejemplo ilustra el grupo de estadísticas de tipo de estadística de interfaz de usuario semántica:

Ejemplo 1: Este ejemplo demuestra las estadísticas de grupo utilizando 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">
         <h1 style="color:green">GeeksforGeeks</h1>
         <b>
            <p>Semantic UI group statistics </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:

Semantic-UI Statistic Type Statistic Group

Grupo de estadísticas de tipo de estadística de interfaz de usuario semántica 

Referencia:  https://semantic-ui.com/views/statistic.html#statistic-group

Publicación traducida automáticamente

Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *