Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI proporciona algunas funciones para agregar insignias al sitio web. Blaze UI se usa para agregar información adicional al contenido. Son útiles cuando necesita proporcionar más información. Por ejemplo, el número de versión de un proyecto o las notificaciones de estado de elementos individuales.
Hay tres atributos que ofrece Blaze UI Badge:
- tipo: este atributo especifica el color de las insignias. Hay 6 tipos de distintivos: Predeterminado, Marca, Advertencia, Información, Éxito y Error.
- redondeado: este atributo especifica el borde curvo de las insignias.
- fantasma: este atributo elimina los cuerpos de la insignia, permite que las insignias muestren solo los bordes.
Blaze UI Badges Clases de CSS:
- c-badge: esta clase se usa para agregar insignias.
- c-badge–rounded: esta clase se usa para agregar insignias redondeadas.
- c-badge–ghost: esta clase se utiliza para agregar el atributo fantasma a las insignias.
Podemos agregar insignias usando la etiqueta blaze-badge proporcionada por Blaze UI sin definir ninguna clase. Para esto, siga la siguiente sintaxis dada.
Sintaxis:
<blaze-badge ghost type="..." rounded >
...
</blaze-badge>
Podemos agregar insignias usando las clases de insignia proporcionadas por Blaze UI.
Sintaxis:
<span class="c-badge ...">
....
</span>
Ejemplo 1: el siguiente código muestra los atributos de la insignia de la interfaz de usuario de Blaze mediante la etiqueta de insignias de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Default Badge </h3> <blaze-badge type="default"> GeeksforGeeks </blaze-badge> <h3> Blaze UI Success Rounded Badge </h3> <blaze-badge type="success" rounded> GeeksforGeeks </blaze-badge> <h3> Blaze UI Info Badge </h3> <blaze-badge type="info" ghost> GeeksforGeeks </blaze-badge> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra los atributos de la insignia de la interfaz de usuario de Blaze mediante las clases CSS de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Default Badge using CSS class </h3> <span class="c-badge">GeeksforGeeks</span> <h3> Blaze UI Success Rounded Badge using CSS class </h3> <span class="c-badge c-badge--rounded c-badge--success"> GeeksforGeeks </span> <h3> Blaze UI Info Badge using CSS class </h3> <span class="c-badge c-badge--ghost c-badge--info"> GeeksforGeeks </span> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/badges/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA