Baldosas compactas Spectre – Barcelona Geeks

Spectre Tiles se utilizan para crear componentes que pueden reemplazar el sistema de cuadrícula. Los mosaicos son bloques de información repetibles o incrustables. Hay una versión compacta del componente de mosaicos, que a menudo se usa como bloques de información de contacto y archivo.

Para crear mosaicos, debe agregar un contenedor con la clase de mosaico. Y agregue elementos secundarios con las clases tile-icon , tile-content o tile-action . El icono de mosaico y la acción de mosaico son opcionales.

Fichas compactas Spectre Clase:

centrado en mosaico: esta clase se utiliza para hacer que el icono de mosaico, el contenido de mosaico y la acción de mosaico estén centrados verticalmente.

Sintaxis:

<div class="tile tile-centered">
  <div class="tile-icon">
    <div class="example-tile-icon">
      ...
    </div>
  </div>
  <div class="tile-content">
    <div class="tile-title">...</div>
    <small class="tile-subtitle">
      ...
    </small>
  </div>
  <div class="tile-action">
    ...
  </div>
</div>

El siguiente ejemplo ilustra los mosaicos Spectre Compact:

Ejemplo: en este ejemplo, crearemos un mosaico y centraremos verticalmente el icono, el contenido y la acción.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Compact Tiles Class</strong>
        <br><br>
    </center>
    <div class="tile tile-centered">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-mail icon-2x"></i>
        </div>
      </div>
      <div class="tile-content">
        <div class="tile-title text-success">
            Geeksforgeeks
        </div>
        <small class="tile-subtitle text-gray">
            A Computer Science Portal for Geeks
        </small>
      </div>
      <div class="tile-action">
        <button class="btn btn-link">
          <i class="icon icon-bookmark"></i>
        </button>
      </div>
    </div>
</body>
 
</html>

Producción:

Baldosas Spectre Compact

Referencia: https://picturepan2.github.io/spectre/components/tiles.html#tiles-compact

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta