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