Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
En este artículo, crearemos la página del formulario de inicio de sesión mediante la interfaz de usuario de Blaze. La página de inicio de sesión se usa para acceder a cualquier sitio web, se puede usar para autenticación, configuración de credenciales, administración de datos, etc.
Clases de interfaz de usuario de Blaze utilizadas:
- o-container: esta clase se usa para hacer el contenedor que contendrá otros componentes.
- c-card: esta clase se utiliza para hacer que la página de inicio de sesión parezca una tarjeta.
- c-heading: Esta clase se utiliza para agregar el encabezado a la tarjeta.
- c-card__body: esta clase se usa para agregar los componentes del cuerpo a la tarjeta.
- c-card__footer: esta clase se usa para agregar los componentes de pie de página a la tarjeta.
- o-form-element: Esta clase se utiliza para agregar los elementos del formulario de inicio de sesión.
- c-label: Esta clase se utiliza para agregar la etiqueta a cualquier componente.
- o-form-element: esta clase se utiliza para agregar los elementos al formulario de inicio de sesión.
- c-hint: esta clase se utiliza para agregar sugerencias a un elemento.
- c-toggle: esta clase se usa para agregar el botón de alternancia.
- c-button: esta clase se usa para agregar el botón para enviar el formulario de inicio de sesión.
Sintaxis:
<form class="o-container...">
<header class="c-card...">
<h2 class="c-heading...">
...
</h2>
</header>
<div class="c-card__body">
...
</div>
<div class="o-form-element">
...
</div>
<div class="c-card__footer ...">
<button type="..." class="c-button ...">
...
</button>
</div>
</form>
Ejemplo 1: el siguiente código muestra el formulario de inicio de sesión de Blaze UI.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <form class="o-container o-container--xsmall c-card u-high"> <header class="c-card__header"> <h2 class="c-heading" style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Login Form Example </div> </h2> </header> <div class="c-card__body"> <div class="o-form-element"> <label class="c-label"> Name: <input class="c-field" type="email" placeholder="Enter Name" /> </label> </div> <div class="o-form-element"> <label class="c-label"> Email: <input class="c-field" type="email" placeholder="Enter e-mail" /> </label> </div> <label class="o-form-element c-label"> Password: <input class="c-field" type="password" placeholder="Enter password" /> </label> <label class="o-form-element c-label"> Enter OTP: <input class="c-field" type="text" placeholder="Enter OTP" /> </label> </div> <div class="c-card__footer"> <button type="button" class="c-button c-button--success"> Login </button> </div> </form> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra el formulario de inicio de sesión de la interfaz de usuario de Blaze usando las otras clases.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <br /> <form class="o-container"> <header class="c-card__header"> <h2 class="c-heading" style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Login Form Example </div> </h2> </header> <div class="c-card__body"> <div class="o-form-element"> <label class="c-label"> Name: <input class="c-field" type="email" placeholder="Enter Name" /> </label> </div> <div class="o-form-element"> <label class="c-label"> Email: <input class="c-field" type="email" placeholder="Enter e-mail" /> <div role="tooltip" class="c-hint"> The email used to register the account </div> </label> </div> <label class="o-form-element c-label"> Password: <input class="c-field" type="password" placeholder="Enter password" /> </label> <label class="o-form-element c-label"> Enter OTP: <input class="c-field" type="text" placeholder="Enter OTP" /> </label> </div> <div class="c-card__footer"> <button type="button" class="c-button c-button--success"> Login </button> </div> </form> </body> </html>
Producción:
Referencia: https://www.blazeui.com/examples/login/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA