Spectre Badges son componentes simples y básicos que se utilizan para mostrar un indicador o contar un número. Esto es muy útil para fines de conteo de correo y alertas, entre otras cosas. Las insignias son idénticas a las etiquetas, con la excepción de que tienen esquinas más redondeadas.
Clase de insignias de espectro:
- insignia: esta clase se utiliza para crear una marca de insignia en botones, iconos, avatares.
Nota: debe agregar el atributo de identificación de datos para mencionar los números. Si no hay un distintivo de datos o no se especifica el atributo, el distintivo aparecerá como un punto.
Sintaxis:
<span class="badge" data-badge=".."> ... </span>
El siguiente ejemplo ilustra las insignias de espectro:
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 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Badges Class</strong> <br><br> <div> <strong> <u>Badge on Avatar:</u> Geeksforgeeks </strong> <figure class="avatar badge" data-badge="14"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence busy"></i> </figure> <p>A Computer Science Portal for Geeks</p> <br> <strong> <u>Badge on Button:</u> Geeksforgeeks </strong> <button class="btn btn-success badge" data-badge="2"> Check Updates </button> </div> </center> </body> </html>
Producción:
Insignias de espectro
Referencia: https://picturepan2.github.io/spectre/components/badges.html#badges
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA