Blaze CSS es un kit de herramientas de interfaz de usuario de código abierto sin Framework. Proporciona una gran estructura para construir sitios web rápidamente con una base escalable y mantenible. Es de naturaleza receptiva, ya que todos los componentes se desarrollan primero para dispositivos móviles y funcionan en cualquier tamaño de pantalla.
Una insignia es un componente esencial de un sitio web. Es útil cuando desea agregar información adicional, como una versión del software o para mensajes de estado que muestran un texto particular al usuario. Blaze UI ofrece una gran variedad de insignias y una de esas variedades se conoce como Badges Ghost. El componente Badges Ghost nos brinda la funcionalidad de eliminar el cuerpo de la insignia.
Blaze UI Badges Clases de fantasmas:
- c-badge–ghost: esta clase se utiliza para crear una insignia fantasma.
Sintaxis:
<span class="c-badge c-badge--ghost">
...
</span>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase c-badge–ghost para crear una insignia fantasma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Blaze UI Badges Ghost </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Badges Ghost </div> </h1> <br> <span class="c-badge c-badge--ghost "> <!--Ghost Badge--> Ghost Badge 1 </span> <span class="c-badge c-badge--ghost "> Ghost Badge 2 </span> <span class="c-badge c-badge--ghost "> Ghost Badge 3 </span> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la diferencia entre una insignia básica simple y una insignia fantasma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Blaze UI Badges Ghost </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Badges Ghost </div> </h1> <br> <span class="c-badge"> <!--Basic Badge--> Basic Badge 1 </span> <span class="c-badge"> Basic Badge 2 </span> <span class="c-badge c-badge--ghost "> <!--Ghost Badge--> Ghost Badge 1 </span> <span class="c-badge c-badge--ghost "> Ghost Badge 2 </span> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/badges/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA