Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que 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.
Los menús de la interfaz de usuario de Blaze se usan para enumerar elementos o se usan como reemplazos de elementos desplegables. Podemos enumerar elementos individuales y agrupar elementos bajo un elemento en el menú.
Menú de colores: este tipo de menú tiene elementos de colores que pueden tener un tipo de marca de color.
Clases de menús de Blaze UI:
- c-card–menu: Se utiliza para especificar que el contenedor está destinado a un menú.
- c-card__control: Especifica la elección dentro del menú.
- c-card__item–divider: Se usa para agregar un divisor entre artículos o componentes.
- c-field: Especifica que el elemento será una elección.
- c-field–choice: Define el elemento para que sea un campo de elección.
- c-card__control–active: Especifica el componente que está actualmente activo o ha sido abierto.
- c-card__control–brand: Esta clase se utiliza para especificar el elemento de color que puede tener un tipo de marca de color.
Sintaxis:
<button class="c-card__control">...</button>
Ejemplo 1: en el siguiente código, utilizaremos la clase ‘ c-card__control–brand’ para especificar la marca de color del elemento.
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> GeeksforGeeks | BlazeUI </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <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> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>A computer science portal for geeks</h3> <div role="menu" class="c-card c-card--menu"> <button role="menuitem" class="c-card__control c-card__control--brand"> GfG </button> </div> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de la clase ‘c-card__control–brand’ para deshabilitar la marca de color del elemento usando el atributo deshabilitado .
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> GeeksforGeeks | BlazeUI </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <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> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>A computer science portal for geeks</h3> <div role="menu" class="c-card c-card--menu"> <button role="menuitem" class="c-card__control c-card__control--brand"> GfG </button> <button role="menuitem" class="c-card__control c-card__control--brand" disabled> GfG disabled </button> </div> </center> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/menus/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA