Blaze UI es un kit 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.
En este artículo, veremos los atributos de autocompletado de la interfaz de usuario de Blaze. El componente 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.
Atributos de autocompletado de la interfaz de usuario de Blaze:
- marcador de posición: solo hay un atributo para el componente Autocompletar llamado marcador de posición .
Sintaxis:
<blaze-autocomplete placeholder="..."> </blaze-autocomplete>
Ejemplo 1: este ejemplo muestra el uso del atributo de marcador de posición del componente de autocompletar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blaze UI - Autocomplete Attributes</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Autocomplete Attributes - Blaze UI</h3>
</div>
<div class="u-window-box-super u-centered">
<b>Autocomplete without <i>placeholder</i> attribute</b>
<br>
<blaze-autocomplete id="autocomplete1"></blaze-autocomplete>
<br>
<b>Autocomplete with <i>placeholder</i> attribute</b>
<blaze-autocomplete id="autocomplete2"
placeholder="This is placeholder text.">
</blaze-autocomplete>
</div>
</body>
</html>
Producción:
Atributos de autocompletado de la interfaz de usuario de Blaze
Ejemplo 2: este ejemplo muestra el uso del atributo de marcador de posición en diferentes tamaños de componentes de autocompletar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Blaze UI - Autocomplete Attributes </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Autocomplete Attributes - Blaze UI </h3>
</div>
<div class="u-window-box-super u-centered">
<b>
Extra-Small Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-xsmall"
placeholder="This is placeholder text.">
</blaze-autocomplete>
<br>
<b>
Small Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-small"
placeholder="This is placeholder text.">
</blaze-autocomplete>
<br>
<b>
Medium Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-medium"
placeholder="This is placeholder text.">
</blaze-autocomplete>
<br>
<b>
Large Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-large"
placeholder="This is placeholder text.">
</blaze-autocomplete>
<br>
<b>
Extra-Large Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-xlarge"
placeholder="This is placeholder text.">
</blaze-autocomplete>
<br>
<b>
Super-Sized Autocomplete with
<i>placeholder</i> attribute
</b>
<blaze-autocomplete class="u-super"
placeholder="This is placeholder text.">
</blaze-autocomplete>
</div>
</body>
</html>
Producción:
Atributos de autocompletado de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/autocomplete/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA