Introducción a la interfaz de usuario de Blaze

Blaze UI es un marco gratuito y de código abierto (licencia MIT) con un kit de herramientas de interfaz de usuario liviano que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.

La interfaz de usuario de Blaze facilita los diseños sin esfuerzo al utilizar los diferentes componentes, objetos y utilidades que ayudan a que el sitio web en general sea atractivo y mejore la interactividad del sitio web. 

Hay 2 formas diferentes de utilizar la interfaz de usuario de Blaze en el proyecto:

  • Al implementar a través de los enlaces CDN
  • Mediante la instalación de los módulos de Node

Exploraremos la opción de usar la interfaz de usuario de Blaze y la entenderemos a través de la implementación.

Al implementar a través de CDN Link: el kit de herramientas de Blaze UI se puede usar a través de enlaces CDN, es decir, para CSS y JavaScript, que se describe a continuación:

Paso 1: agregue los componentes CSS y JavaScript: Necesitamos agregar el siguiente enlace dentro de la etiqueta <head>:

Componente CSS:

<enlace rel=”hoja de estilo” href=”https://unpkg.com/@blaze/css@xxx/dist/blaze/blaze.css”>

Componente JavaScript:

<script type=”module” src=”https://unpkg.com/@blaze/atoms@xxx/dist/blaze-atoms/blaze-atoms.esm.js”></script>
<script nomodule=”” src=”https://unpkg.com/@blaze/atoms@xxx/dist/blaze-atoms/blaze-atoms.js”></secuencia de comandos>

Paso 2: agregue el componente específico implementando la clase particular:

<button class="c-button" type="button">Button</button>

Al instalar los módulos de Node: podemos usar la interfaz de usuario de Blaze instalando los módulos de Node. Los pasos para la instalación se dan a continuación:

Paso 1: Ejecute el siguiente comando para instalar la interfaz de usuario de Blaze:

npm install @blaze/atoms --save

 

Paso 2: agregue la siguiente etiqueta <script> dentro de la sección <head> en el archivo index.html :

<script src=”node_modules/@blaze/atoms/dist/blaze-atoms.js”></script>

Paso 3: Agregue la clase particular para implementar el componente específico:

<p class="u-centered" style="color:violet">Content</p>

Paso 4: Ejecute el siguiente comando para ejecutar la aplicación:

npm run test

La interfaz de usuario de Blaze también puede proporcionar diferentes opciones de personalización que se pueden usar para cambiar las variables y los mixins y también crear el kit de herramientas con diferentes opciones de diseño mediante el uso de componentes, objetos y utilidades.

Ejemplo 1: este ejemplo describe la implementación de Blaze UI mediante la especificación de una lista desordenada sin estilo con un encabezado grande.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <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 Example</h3>
    <p class="c-heading u-large"> Unordered unstyled list</p>
  
    <ul class="c-list c-list--unstyled">
        <li class="c-list__item">Data Structure</li>
        <li class="c-list__item">Algorithm</li>
        <li class="c-list__item">Web Technologies</li>
    </ul>
</body>
</html>

Producción:

 

Ejemplo 2: este ejemplo describe la implementación de la interfaz de usuario de Blaze especificando el botón activo con un grupo de entrada redondeado.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <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 Example</h3>
    <div class="u-window-box-xsmall">
        <h4>
            Active Buttons with Input Group Rounded
        </h4>
        <div class="c-input-group c-input-group--rounded-left">
            <button class="c-button 
                c-button--success c-button--active">
                GeeksforGeeks 
            </button>
            <div class="o-field">
                <input class="c-field" 
                       name="mInput" 
                       placeholder="Email_Id">
            </div>
            <button class="c-button c-button--brand">
                Submit 
            </button>
        </div>
    </div>
</body>
</html>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por bijaybhaskar 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 *