TextBox
El control TextBox permite a un usuario escribir texto en una aplicación. Normalmente se usa para capturar una sola línea de texto, pero puede configurarse para capturar varias líneas. El texto se muestra en pantalla en un formato de texto sin formato simple, uniforme.
Uso
<script>
import { TextBox } from 'fluentui-svelte';
</script>
<TextBox type="text" placeholder="Type here..." />API del componente
Una breve explicación de las props que realmente necesitan explicación. Puedes ver el resto de las props aquí.
Tipo
La prop `type` especifica el tipo de elemento de entrada. Puede establecerse en varios tipos como `text`, `search`, `email`, `url`, `tel`, `password` o `number`. Esto determina el comportamiento y la validación de la entrada.
Elemento de entrada
La prop `ref` te permite vincular una referencia al elemento HTML `input` subyacente (`bind:ref`). Esto puede ser útil para manipulaciones directas del DOM o para acceder a propiedades nativas del input. El elemento contenedor puede vincularse mediante `wrapperRef`.
Solo lectura
La prop `readonly` hace que el campo de entrada sea de solo lectura, evitando que los usuarios modifiquen su valor. Esto es útil para mostrar información que no debe editarse.
Placeholder
La prop `placeholder` establece el texto de marcador de posición del campo de entrada, proporcionando una pista a los usuarios sobre qué introducir.
Ocultar botones
La prop `hideActionButtons` te permite ocultar los botones de acción adicionales en la entrada, como los botones de limpiar o enviar. Esto puede ser útil para una interfaz más limpia cuando esas acciones no son necesarias.
Consulta enviada
El evento `querySubmitted` se activa cuando se envía una consulta, por ejemplo cuando el usuario pulsa Enter en un campo de búsqueda. Esto te permite gestionar el envío del valor introducido.
Texto cambiado
El evento `textChanged` se activa cada vez que cambia el contenido del cuadro de texto. Puede utilizarse para reaccionar a la entrada del usuario en tiempo real, por ejemplo validando la entrada o actualizando otras partes de la interfaz.
On Clear
El evento `onClear` se activa cuando se limpia la entrada, permitiéndote gestionar cualquier acción necesaria cuando el usuario elimina el valor introducido.
Props del componente
| Name | Type | Description |
|---|---|---|
type | string | El tipo del elemento de entrada. Valores posibles: `'text'`, `'search'`, `'email'`, `'url'`, `'tel'`, `'password'`, `'number'`. |
ref | HTMLInputElement | La referencia DOM del elemento de entrada. |
wrapperRef | HTMLDivElement | La referencia DOM del elemento contenedor. |
wrapperAttributes | HTMLAttributes<HTMLDivElement> | Atributos adicionales reenviados al elemento contenedor. |
size | 'small' | 'medium' | 'large' | El tamaño de la entrada. |
readonly | boolean | Si la entrada es de solo lectura. |
placeholder | string | El texto de marcador de posición de la entrada. |
hideActionButtons | boolean | Si se deben ocultar los botones de acción adicionales de la entrada. |
justify | boolean | Si la entrada ocupa todo el ancho del contenedor. |
contentBefore | string | Snippet | Component | Contenido renderizado antes de la entrada (por ejemplo, un icono). |
contentAfter | string | Snippet | Component | Contenido renderizado después de la entrada (por ejemplo, un icono). |
textChanged | (e: InputEvent, text: string) => void | Evento que se activa cuando cambia el contenido del cuadro de texto. |
querySubmitted | (e: MouseEvent \| KeyboardEvent, query: string) => void | Evento que se activa cuando se envía una consulta (Enter o clic en el icono de búsqueda en `type="search"`). |
onClear | (e: MouseEvent) => void | Evento que se activa cuando se limpia la entrada. |
children | Snippet | Los elementos hijos que se renderizan dentro de la entrada. |