Contenido de metadatos de elementos de interfaz de usuario semántica

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para páginas web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. hace que las páginas web se vean increíbles y receptivas.

El elemento de interfaz de usuario semántica presenta una gran colección de tipos de datos similares en un sitio. El elemento puede contener una imagen, encabezado, descripción, botones, fecha, etc. El elemento es la colección de elementos en la interfaz de usuario semántica.

El contenido de metadatos de elementos de la interfaz de usuario semántica se utiliza para mostrar metadatos como la fecha, el precio, la calificación, el recuento de Me gusta y reseñas, etc. Los elementos secundarios dentro de los metadatos se espacian automáticamente.

Clases de contenido de metadatos de elementos de interfaz de usuario semántica:

meta : al agregar esta clase a un contenedor dentro del contenedor de contenido, los elementos secundarios se muestran como metadatos.

Sintaxis : agregue la clase meta a un contenedor dentro del contenedor de contenido de la siguiente manera:

<div class="items">
    <div class="item">
        <div class="content">
            ...
            <div class="meta"> ... </div>
            ...
        </div>
    </div>
    ...
</div>

Ejemplo : en el siguiente ejemplo, hemos agregado diferentes metadatos a la metaclase para mostrarlos.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  </head>
  
  <body>
    <div class="ui container">
      <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Item Metadata Content</strong>
      </center>
    </div>
    <div class="ui items">
      <div class="item">
        <div class="ui small image">
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          />
        </div>
        <div class="content">
          <div class="header">Data Structures and Algorithms</div>
          <div class="meta">
            <span class="likes">30 Likes</span>
            <span class="views">10000 Views</span>
          </div>
          <div class="description">
            <p>Lots of high quality tutorials in GeeksforGeeks</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="ui small image">
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          />
        </div>
        <div class="content">
          <div class="header">Machine Learning</div>
          <div class="meta">
            <span class="likes">123 Likes</span>
            <span class="views">2300 Views</span>
          </div>
          <div class="description">
            <p>Get started with Machine Learning with GeeksforGeeks</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Producción

Referencia: https://semantic-ui.com/views/item.html#metadata

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta