Azulejos de espectro – Barcelona Geeks

Spectre Tiles se utilizan para crear componentes que se pueden usar para reemplazar el sistema de cuadrícula. Los mosaicos son bloques de información repetibles o incrustables. Para crear mosaicos, debe agregar un contenedor con la clase de mosaico y agregar elementos secundarios con las clases de icono de mosaico, contenido de mosaico o acción de mosaico . Las clases icono de mosaico y acción de mosaico son opcionales.

Azulejos de espectro:

Fichas Spectre Compact: se utilizan como bloques de información de contacto y archivo.

Clase de fichas de espectro:

mosaico: esta clase se utiliza para crear el mosaico.
tile-title: esta clase se utiliza para establecer el título del mosaico.
tile-subtitle: esta clase se utiliza para establecer el subtítulo del mosaico.
tile-icon: esta clase se utiliza para establecer el icono del mosaico.
mosaico-contenido: esta clase se utiliza para definir el contenido del mosaico.
acción de mosaico: esta clase se usa para definir la acción (botón) solamente.

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 Spectre Tiles:

Ejemplo:

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 Tiles Class</strong>
        <br><br>
    </center>
    <div class="tile">
      <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:

Azulejos de espectro

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