En este artículo, veremos cómo instalar Blaze UI y cómo usarlo para diseñar la página web. Blaze UI es un conjunto de herramientas de interfaz de usuario gratuito y de código abierto para crear un excelente sitio web. Le proporciona varias características como capacidad de respuesta, componentes personalizados, etc.
Ahora, para instalar la interfaz de usuario de Blaze y usarla, simplemente podemos hacerlo usando CDN. Usar un CDN es una forma muy fácil de usar cualquier marco CSS como Blaze. Los pasos para instalar la interfaz de usuario de Blaze se detallan a continuación:
Método 1:
Paso 1: Instale CSS: El archivo blaze.css contiene todo lo que necesita para diseñar sus componentes HTML. Para usar la interfaz de usuario de Blaze, agregue el siguiente código dentro de la sección <head> .
<enlace rel=”hoja de estilo” href=”https://unpkg.com/@blaze/css@xxx/dist/blaze/blaze.css”>
Paso 2: use los estilos de la interfaz de usuario de Blaze en su HTML: para usar el estilo, simplemente use las clases en los nombres de clase del componente HTML. Esto significa que tenemos que agregar clases a cada parte de nuestro sitio donde queremos que se aplique Blaze. Vea los siguientes ejemplos.
Paso 3: Instalación de JavaScript: agregue los siguientes scripts dentro de la sección <head>. Estos archivos lo ayudarán cuando esté tratando con algunas funcionalidades de 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>
Y eso es todo, ahora puede simplemente comenzar a usar el marco de la interfaz de usuario de Blaze. Ahora, veamos algunos ejemplos.
Método 2:
Instale la interfaz de usuario de Blaze usando módulos de Node: puede ejecutar el siguiente comando en el terminal para instalar la interfaz de usuario de Blaze. Primero instale Node.js antes de ejecutar este comando.
npm install @blaze/atoms --save
Después de instalar la interfaz de usuario de Blaze localmente, agregue el siguiente código dentro de la sección principal del código.
<script src=”node_modules/@blaze/atoms/dist/blaze-atoms.js”></script>
Ejemplo 1: el siguiente ejemplo muestra el botón en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> </head> <body> <div class="o-container o-container--xlarge"> <h1>GeeksforGeeks</h1> <h2>Button in Blaze UI</h2> <button type="button" class="c-button c-button--success"> Sign Up </button> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra la alerta en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> </head> <body> <div class="o-container o-container--xlarge"> <h1>GeeksforGeeks</h1> <h2>Alert in Blaze UI</h2> <div role="alert" class="c-alert c-alert--error"> <button class="c-button c-button--close">× </button> Error </div> </div> </body> </html>
Producción:
Referencias: https://www.blazeui.com/getting-started/install
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA