Blaze UI es un conjunto de herramientas de interfaz de usuario de código abierto gratuito que proporciona una base sólida y mantenible para desarrollar soluciones web escalables. Todos los componentes de Blaze UI se desarrollan primero para dispositivos móviles y se basan en características nativas del navegador, no en ninguna biblioteca o marco adicional.
La interfaz de usuario de Blaze proporciona la función de autocompletar , la función de autocompletar permite a los usuarios identificar y elegir fácilmente de una lista de valores rellenada previamente a medida que ingresan, utilizando la búsqueda y el filtrado.
Atributo de autocompletar de Blaze UI : el componente de autocompletar solo tiene un atributo opcional llamado marcador de posición que acepta un valor de string que es el texto inicial que se muestra en el campo de entrada.
Métodos de autocompletado de la interfaz de usuario de Blaze:
- setItems: este método se utiliza para configurar la lista de elementos del menú.
Eventos de autocompletado de la interfaz de usuario de Blaze:
- filtro: este evento se activa cuando el usuario escribe la entrada pasando el valor del cuadro de texto.
- seleccionar: este evento se activa cuando se elige un elemento del menú.
Etiqueta de autocompletado de la interfaz de usuario de Blaze:
- blaze-autocompletar: esta etiqueta se utiliza para agregar la función de autocompletar al sitio web.
Sintaxis:
<blaze-autocomplete placeholder="..."> </blaze-autocomplete>
Ejemplo 1: el siguiente código muestra la función Autocompletar 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 type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Autocomplete </h2> <blaze-autocomplete></blaze-autocomplete> </body> </html>
Producción:
Autocompletar interfaz de usuario de Blaze
Ejemplo 2: el siguiente código demuestra la característica de autocompletar de la IU de Blaze mediante la etiqueta de autocompletar de la IU de Blaze con un atributo de marcador de posición .
HTML
<!DOCTYPE html> <html> <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> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Autocomplete </h2> <blaze-autocomplete placeholder="Enter some text..."> </blaze-autocomplete> </body> </html>
Producción:
Autocompletar interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/autocomplete/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA