Menús de la interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

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, así como elementos de grupo bajo un elemento en el menú.

Tipos de menú de la interfaz de usuario de Blaze:

  • Menú simple: este es un menú simple con un CSS simple que contiene los elementos como bloques de elementos.
  • Menú de elementos agrupados: este menú tiene los elementos agrupados y los separa de otra categoría de elementos en el menú.
  • Menú de colores: este tipo de menú tiene elementos de colores que pueden tener un tipo de marca de color.
  • Menú combinado: este tipo de menú contiene elementos que pueden tener entradas.

Clases de menús de Blaze UI:

  • c-card–menu: esta clase se usa para especificar que el contenedor está destinado a 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.
  • c-card__control–active: Especifica el componente que está actualmente activo o ha sido abierto.

Sintaxis :

<div role="menu" class="c-card c-card--menu">
  <button role="menuitem" class="c-card__control">
       ...
  </button>
</div>

Ejemplo 1: En el siguiente ejemplo, tenemos una lista de elementos en el menú simple con enlaces 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" />
    <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>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br> <br>
  
            <div role="menu" class="c-card c-card--menu">
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control"
                   href=
            "https://www.geeksforgeeks.org/data-structures/" >
                    Data Structures
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/" >
                    Algorithms
                </a>
                  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
            "https://www.geeksforgeeks.org/machine-learning/" >
                    Machine Learning
                </a>
  
                <button role="menuitem" 
                        class="c-card__control" 
                        disabled >
                    And much more
                </button>
            </div>
        </center>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: En el siguiente ejemplo, tenemos un menú agrupado 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" />
    <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>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br />
            <br />
        </center>
  
        <div role="menu" class="c-card c-card--menu">
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
"https://www.geeksforgeeks.org/data-structures/">
                Data Structures
            </a>
  
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/">
                Algorithms
            </a>
  
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
"https://www.geeksforgeeks.org/machine-learning/">
                Machine Learning
            </a>
              
            <div role="separator" 
                 class="c-card__divider">
            </div>
  
            <button role="menuitem" 
                    class="c-card__control">
                Java
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                C++
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                Python3
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                Javascript
            </button>
  
            <div role="separator" 
                 class="c-card__divider">
            </div>
  
            <button role="menuitem" 
                    class="c-card__control" 
                    disabled>
                And much more
            </button>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 3: En el siguiente ejemplo, tenemos un grupo de menú dentro del menú que contiene diferentes lenguajes de programación separados por un divisor y que contiene dos elementos combinados. 

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>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br> <br>
  
            <div role="menu" class="c-card c-card--menu">
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
"https://www.geeksforgeeks.org/data-structures/" >
                    Data Structures
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/" >
                    Algorithms
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
"https://www.geeksforgeeks.org/machine-learning/" >
                    Machine Learning
                </a>
  
                <div role="separator" 
                     class="c-card__divider">
                </div>
  
                <label role="menuitem" 
                       class="c-card__control 
                       c-field c-field--choice">
                    <input type="checkbox" />
                    Python3
                </label>
  
                <label role="menuitem" 
                       class="c-card__control 
                       c-field c-field--choice">
                    <input type="checkbox" />
                    Java
                </label>
  
                <div role="separator" 
                     class="c-card__divider">
                </div>
            </div>
        </center>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://www.blazeui.com/components/menus/

Publicación traducida automáticamente

Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *