Los estados Spectre Empty son importantes como marcador de posición cuando tiene un diseño de carga. Los estados vacíos/pizarras en blanco se usan comúnmente como marcadores de posición para el primer uso, datos vacíos y pantallas de error.
Hay muchas cosas que puede incluir en un componente de estado vacío, como iconos, mensajes, botones, una combinación de cualquier componente.
Spectre Clase de estados vacíos:
- vacío: Esta clase se utiliza para crear un tema vacío, que será de color gris.
- icono vacío: esta clase se utiliza para crear un tema de icono vacío.
- título vacío: esta clase se utiliza para crear un tema de título vacío. Aquí debe establecer el tamaño de fuente utilizando la clase h1 a h6.
- subtítulo vacío: esta clase se utiliza para crear un tema de subtítulos vacíos.
- acción vacía: esta clase se usa para crear un tema de acción vacía, donde puede agregar botones.
Sintaxis:
<div class="empty">
<div class="empty-icon">
<i class="..."></i>
</div>
<p class="empty-title">....</p>
<p class="empty-subtitle">...</p>
<div class="empty-action">
<button class="...">..</button>
</div>
</div>
El siguiente ejemplo ilustra los estados vacíos de Spectre :
Ejemplo 1:
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 Empty states Class</strong> <br> <div class="empty"> <div class="empty-icon"> <i class="icon icon-people"></i> </div> <p class="empty-title h5"> You have no new messages </p> <p class="empty-subtitle"> Click the button to start a conversation. </p> <div class="empty-action"> <button class="btn btn-success "> Send a message </button> </div> </div> </center> </body> </html>
Producción:
Espectro Estados vacíos
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Buttons Class</title> <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 Empty states Class</strong> <br> <div class="empty"> <div class="empty-icon"> <i class="icon icon-people"></i> </div> <p class="empty-title h5"> You don't have any Friends </p> <p class="empty-subtitle"> Start to meet new friends </p> <div class="empty-action"> <input class="form-input" type="text" placeholder="Search for Friends"> <br><br> <button class="btn btn-primary "> Search <i class="icon icon-search"></i> </button> </div> </div> </center> </body> </html>
Producción:
Espectro Estados vacíos
Referencia: https://picturepan2.github.io/spectre/components/empty.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA