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 sitios fácilmente. Nos proporciona una estructura excelente que nos ayuda a crear 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 para que funcionen en cualquier tamaño de pantalla. También nos da la libertad de integrar el marco opuesto si así lo deseamos. Con variables y mixins fáciles de usar, ofrece una fácil configuración de compilaciones personalizadas. Nos ofrece muchos 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 distintos componentes durante una vista de lista. Estos componentes nos redirigen a las numerosas páginas enlazadas dentro de los sitios web o aplicaciones web. El menú combinado nos permite crear un menú donde podemos poner algunas entradas en el menú y podemos seleccionar varias selecciones en un menú. Para crear un menú combinado, debemos agregar un elemento de etiqueta que especifique el espacio y el tipo del componente y una etiqueta de entrada para tener una casilla de verificación para cada elemento.
Clases usadas:
- c-card–menu: Se utiliza para especificar qué elemento se pretende que se convierta en un menú.
- c-card__control: Esta clase 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.
Sintaxis:
<div role="menu" class="c-card c-card--menu u-high">
<label role="menuitem" class="c-card__control
c-field c-field--choice">
<input type="checkbox"> . . . .
</label>
<label role="menuitem" class="c-card__control
c-field c-field--choice">
<input type="checkbox"> . . . .
</label>
</div>
Ejemplo 1: El siguiente ejemplo muestra un menú combinado con un divisor en el medio.
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"> <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> <title>Blaze UI Menus Combo</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Menus Grouped Items</h3> <div role="menu" class="c-card c-card--menu u-high"> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> DSA </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Web Technologies </label> <div role="separator" class= "c-card__item c-card__item--divider">Divider </div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Interview Experience </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Algorithms </label> <div role="separator" class= "c-card__item c-card__item--divider">Divider </div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Competitive Programming </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> DSA Questions </label> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo de código muestra el menú combinado con elementos agrupados .
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"> <title>Blaze UI Menus Grouped Items</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Menus Combo</h3> <div role="menu" class="c-card c-card--menu u-high"> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> DSA </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Web Technologies </label> <div role="separator" class="c-card__divider"></div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Interview Experience </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Algorithms </label> <div role="separator" class="c-card__divider"></div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Competitive Programming </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> DSA Questions </label> <div role="separator" class="c-card__divider"></div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Topic-wise Practice </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Interview Preparation </label> <div role="separator" class="c-card__divider"></div> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Machine Learning </label> <label role="menuitem" class= "c-card__control c-field c-field--choice"> <input type="checkbox"> Java </label> </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