Blaze UI es un marco CSS de código abierto. Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene. En este artículo, analizaremos las sugerencias de entrada de la interfaz de usuario de Blaze.
Las sugerencias de entrada de Blaze UI se utilizan para dar sugerencias al usuario para completar el campo de entrada dado. Para dar pistas, usamos la clase .c-hint . Si el usuario desea ver las sugerencias todo el tiempo, podemos usar la clase .c-hint–static para mostrar la sugerencia siempre.
Clase de sugerencias de entrada de Blaze UI:
- c-hint: esta clase se utiliza para dar pistas al usuario.
- c-hint–static: esta clase se usa para mostrar la sugerencia de forma permanente todo el tiempo.
Sintaxis:
<label class="c-label">
<input class="c-field c-field--label">
<div role="tooltip" class="c-hint">
...
</div>
</label>
Ejemplo 1: el siguiente código demuestra el uso de sugerencias de entrada de la interfaz de usuario de Blaze mediante la clase c-hint .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Hints </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Hints </h3> <label class="o-container o-container--xsmall c-label"> Enter username or email: <input class="c-field c-field--label"> <div role="tooltip" class="c-hint"> Log in with username or email </div> </label> </div> </body> </html>
Producción:
Sugerencias de entrada de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente código muestra las sugerencias de entrada de la interfaz de usuario de Blaze mediante la clase c-hint–static .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Hints </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Hints </h3> <label class="o-container o-container--xsmall c-label"> <b> Enter username or email: </b> <input class="c-field c-field--label"> <div role="tooltip" class="c-hint--static"> Log in with username or email </div> </label> </div> </body> </html>
Producción:
Sugerencias 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 harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA