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 excelente estructura que nos ayuda a crear una base sólida y fácil de mantener para los sitios web. Todos los componentes están desarrollados teniendo como prioridad la capacidad de respuesta móvil, para que funcionen en cualquier tamaño de pantalla. También nos da la libertad de integrar el otro marco si así lo deseamos. Con variables y mixins fáciles de usar, ofrece una fácil configuración de compilaciones personalizadas. Nos ofrece toneladas de componentes como acordeones, autocompletar, avatares, migas de pan, etc., lo que nos permite diseñar y construir sitios cómodamente.
Blaze UI Menu nos ayuda a navegar por diferentes componentes en una vista de lista. Estos componentes nos redirigen a las diversas páginas vinculadas dentro de los sitios web o aplicaciones web. Los elementos agrupados son una forma de presentar los componentes, se pueden utilizar para agrupar componentes u opciones similares. Para agrupar los elementos de un menú tenemos que añadir un separador encima y debajo de los elementos o componentes que queremos agrupar.
Clases de elementos agrupados de los menús de Blaze UI:
- c-card–menu: esta clase se utiliza para especificar qué contenedor está destinado a un menú.
- c-card__control: Esta clase especifica los componentes dentro del menú.
- c-card__item–divider: Se usa para agregar un divisor entre artículos o componentes.
- c-card__control–active: Especifica el componente que está actualmente activo o ha sido abierto.
Para agregar un separador, debemos agregar la clase c-card__item–divider a un elemento HTML div y dar el valor del atributo de rol como separador.
Sintaxis:
div role="menu" class="c-card c-card--menu">
<div role="separator" class="c-card__divider"></div>
<button role="menuitem" class="c-card__control">
...
</button>
....
</div>
Ejemplo 1: El siguiente código agrupa dos elementos de menú.
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 Menus Grouped Items</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> <div role="separator" class="c-card__divider"></div> <button role="menuitem" class="c-card__control"> Competitive Programming </button> <button role="menuitem" class="c-card__control"> C++ </button> <div role="separator" class="c-card__divider"></div> <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: El siguiente código agrupa un elemento de menú activo y uno 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 Menus Grouped Items</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> <div role="separator" class="c-card__divider"></div> <button role="menuitem" class= "c-card__control c-card__control--active"> Algorithms </button> <button role="menuitem" class="c-card__control" disabled> Competitive Programming </button> <div role="separator" class="c-card__divider"></div> <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