Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Una insignia es un componente esencial de un sitio web. Es útil cuando desea agregar información adicional, como números de versión de software o para mensajes de estado que muestran un texto particular al usuario. Blaze UI proporciona una gran variedad de insignias, en este artículo veremos brevemente todas y cada una de las variedades de insignias.
Insignias de interfaz de usuario de Blaze:
- Colores de las insignias de Blaze UI : este tipo de insignia se usa para definir el color de la insignia, podemos usar c-badge–color_class para eso.
- Insignias de la interfaz de usuario de Blaze redondeadas : este tipo de insignia se usa para hacer que la esquina de la insignia sea redondeada, podemos usar la clase redondeada c-badge para eso.
- Blaze UI Badges Ghost: este tipo de insignia se usa cuando desea eliminar la parte del cuerpo de cualquier insignia, podemos usar c-badge–ghost para eso.
Nota: Recuerde que estas clases se pueden combinar y usar en una sola insignia que se puede colorear y redondear con esquinas con un tipo de cuerpo fantasma.
Sintaxis:
<span class="c-badge c-badge--badge-type">
...
</span>
A continuación se muestran ejemplos que ilustran las insignias de la interfaz de usuario de Blaze:
Ejemplo 1: este ejemplo demuestra las insignias de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Blaze UI Badges </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html{
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Blaze UI Badges </h3>
</div>
<div class="u-window-box-large">
<h4> Blaze UI Badges Colors: </h4>
<span class="c-badge c-badge--warning">
! Are you Sure
</span>
<span class="c-badge c-badge--success">
Uploaded
</span>
<span class="c-badge c-badge--error">
Delete File
</span>
</div>
<div class="u-window-box-large">
<h4> Blaze UI Badges Rounded: </h4>
<span class="c-badge c-badge--rounded">
! Are you Sure
</span>
<span class="c-badge c-badge--rounded">
Uploaded
</span>
<span class="c-badge c-badge--rounded">
Delete File
</span>
</div>
<div class="u-window-box-large">
<h4> Blaze UI Badges Ghost: </h4>
<span class="c-badge c-badge--ghost">
! Are you Sure
</span>
<span class="c-badge c-badge--ghost">
Uploaded
</span>
<span class="c-badge c-badge--ghost">
Delete File
</span>
</div>
</body>
</html>
Producción:
Insignias de interfaz de usuario de Blaze
Ejemplo 2: este ejemplo demuestra las insignias de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blaze UI Badges</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html{
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Blaze UI Badges </h3>
</div>
<div class="u-window-box-large">
<h4> Blaze UI Badges Combined: </h4>
<span class="c-badge c-badge--warning
c-badge--rounded c-badge--ghost">
! Are you Sure
</span>
<span class="c-badge c-badge--success
c-badge--rounded c-badge--ghost">
Uploaded
</span>
<span class="c-badge c-badge--error
c-badge--rounded c-badge--ghost">
Delete File
</span>
</div>
</body>
</html>
Producción:
Insignias de interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/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