Blaze CSS es un conjunto de herramientas de interfaz de usuario de código abierto sin marco. 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 el número de versión del software o para mensajes de estado que muestran un texto en particular al usuario. Blaze UI proporciona una gran variedad de insignias y una de esas variedades se conoce como Badge Rounded . El componente Insignia redondeada nos brinda la funcionalidad de crear una insignia redondeada.
Insignias de IU de Blaze Clases redondeadas:
- c-badge–rounded: esta clase se utiliza para crear una insignia redondeada.
Sintaxis:
<span class="c-badge c-badge--rounded"> ... </span>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase c-badge-rounded para crear una insignia redondeada.
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 Rounded </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="c-heading" style="color:green"> GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Badges Rounded
</div>
</h1>
<br><!--Roounded Badge-->
<span class="c-badge c-badge--rounded
c-badge--warning">
Rounded Badge 1
</span>
<span class="c-badge c-badge--rounded
c-badge--brand">
Rounded Badge 2
</span>
<span class="c-badge c-badge--rounded
c-badge--error">
Rounded Badge 3
</span>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la diferencia entre una insignia básica simple y una insignia redondeada.
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 Rounded </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="c-heading" style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Badges Rounded
</div>
</h1>
<br><!--Simple Badge-->
<span class="c-badge c-badge--warning">
Simple Badge 1
</span>
<span class="c-badge c-badge--success">
Simple Badge 2
</span><!--Rounded Badge-->
<span class="c-badge c-badge--rounded c-badge--brand">
Rounded Badge 1
</span>
<span class="c-badge c-badge--rounded c-badge--error">
Rounded 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