Blaze UI es un marco de código abierto de CSS . Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Button Groups se usa para crear el grupo de los botones relacionados juntos usando la clase c-input-group . Cuando agrupemos los botones, se eliminará el espacio entre ellos. En este artículo, analizaremos los grupos de botones de la interfaz de usuario de Blaze.
Clase de grupos de botones de la interfaz de usuario de Blaze:
- c-input-group: Esta clase se utiliza para crear el grupo de botones.
Sintaxis:
<span class="c-input-group">
<button type="button" class="c-button">
...
</button>
<button type="button" class="c-button">
...
</button>
...
</span>
Ejemplo 1: este ejemplo muestra los grupos de botones de la interfaz de usuario de Blaze con los botones predeterminados.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Button Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-pillar-box-small"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Button Groups </h3> <span class="c-input-group"> <button type="button" class="c-button"> GFG Button 1 </button> <button type="button" class="c-button"> GFG Button 2 </button> <button type="button" class="c-button"> GFG Button 3 </button> </span> </body> </html>
Producción:
Grupos de botones de la interfaz de usuario de Blaze
Ejemplo 2: este ejemplo muestra los grupos de botones de la interfaz de usuario de Blaze mediante botones de colores .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Button Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-pillar-box-small"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Button Groups </h3> <span class="c-input-group"> <button type="button" class="c-button c-button--brand"> GFG Button 1 </button> <button type="button" class="c-button c-button--info"> GFG Button 2 </button> <button type="button" class="c-button c-button--warning"> GFG Button 3 </button> </span> </body> </html>
Producción:
Grupos de botones de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/buttons/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA