Blaze UI es un marco front-end receptivo y un kit de herramientas de interfaz de usuario de código abierto gratuito que se utiliza para crear páginas web fácilmente. Nos proporciona una gran estructura que nos ayuda a construir una base sólida y fácil de mantener para los sitios web. Todos los componentes se desarrollan manteniendo la capacidad de respuesta móvil como una prioridad, por lo que funcionan en cualquier tamaño de pantalla. También nos da la libertad de integrar cualquier otro marco si queremos. Con variables y mixins fáciles de usar, ofrece una fácil configuración de compilaciones personalizadas. Nos ofrece una gran cantidad de componentes como acordeones, autocompletar, avatares, migas de pan, etc. que nos permiten diseñar y construir páginas web a gusto.
Blaze UI Menu nos ayuda a navegar por diferentes componentes en un formato de lista. Estos componentes nos redireccionan a las distintas páginas enlazadas en los sitios web o aplicaciones web.
Clases de menú simple de Blaze UI:
- c-card–menu: esta clase se utiliza para especificar qué contenedor está destinado a un menú.
- c-card__control: Especifica los componentes dentro del menú.
- c-card__item–divider: esta clase se usa para agregar un divisor entre elementos o componentes.
- c-card__control–active: Enumera el componente que está actualmente activo o ha sido abierto.
El atributo disabled se utiliza para desactivar un componente o elemento de menú.
Sintaxis:
<div role="menu" class="c-card c-card--menu">
<button role="menuitem" class="c-card__control">
...
</button>
...
<div role="separator" class=
"c-card__item c-card__item--divider">
...
</div>
</div>
Ejemplo 1: en el siguiente ejemplo, hay un código para un menú con un divisor y un elemento 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"> <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 Simple Menu</h3> <div role="menu" class="c-card c-card--menu"> <button role="menuitem" class="c-card__control"> DSA </button> <button role="menuitem" class="c-card__control"> Web Technologies </button> <div role="separator" class="c-card__item c-card__item--divider"> Divider </div> <button role="menuitem" class="c-card__control"> Interview Experience </button> <button role="menuitem" class="c-card__control"> DSA Questions </button> <button role="menuitem" class="c-card__control" disabled> Algorithms </button> <button role="menuitem" class="c-card__control"> Competitive Programming </button> <button role="menuitem" class="c-card__control"> C++ </button> <button role="menuitem" class="c-card__control"> Java </button> <button role="menuitem" class="c-card__control"> Python </button> <button role="menuitem" class="c-card__control"> Machine learning </button> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, el código ilustra un elemento activo en el menú usando la clase c-card__control–active .
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"> <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 Simple Menu</h3> <div role="menu" class="c-card c-card--menu"> <button role="menuitem" class="c-card__control"> DSA </button> <button role="menuitem" class="c-card__control"> Web Technologies </button> <div role="separator" class="c-card__item c-card__item--divider"> Divider </div> <button role="menuitem" class="c-card__control"> Interview Experience </button> <button role="menuitem" class="c-card__control"> DSA Questions </button> <button role="menuitem" class="c-card__control c-card__control--active"> Algorithms </button> <button role="menuitem" class="c-card__control"> Competitive Programming </button> <button role="menuitem" class="c-card__control"> C++ </button> <button role="menuitem" class="c-card__control"> Java </button> <button role="menuitem" class="c-card__control"> Python </button> <button role="menuitem" class="c-card__control"> Machine learning </button> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/menus
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA