Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito 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 características 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.
En este artículo, veremos los iconos de entrada de la interfaz de usuario de Blaze. Los iconos de entrada se utilizan para agregar los iconos con el componente de entrada. Son útiles para identificar el tipo de entrada que tenemos que agregar.
Clase de iconos de entrada de interfaz de usuario de Blaze:
- c-icon: esta clase se usa para agregar un icono con el componente de entrada.
- o-field–icon-left: esta clase se usa para agregar un icono en el lado izquierdo con el componente de entrada.
- o-field–icon-right: esta clase se usa para agregar un icono en el lado derecho con el componente de entrada.
Sintaxis:
<div class="o-field o-field--icon-left"> <i class="far fa-calendar-alt c-icon"></i> <input class="c-field" type="text"> </div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de los iconos de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"> </script> </head> <body> <div class="o-container o-container--medium"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Blaze UI Input Icons</h3> <div class="o-field o-field--icon-left"> <i class="fas fa-user c-icon"></i> <input class="c-field" type="text" placeholder="Enter username" /> </div> </div> </body> </html>
Producción:
Iconos de entrada de la interfaz de usuario de Blaze
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de los iconos de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"> </script> </head> <body> <div class="o-container o-container--medium"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Blaze UI Input Icons</h3> <div class="o-field o-field--icon-left o-field--icon-right"> <i class="fa fa-envelope c-icon u-color-brand"></i> <input class="c-field c-field--success" type="text" placeholder="Enter email id"> <i class="fas fa-check c-icon u-color-green"></i> </div> </div> </body> </html>
Producción:
Iconos de entrada de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/inputs
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA