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..." />Forma
Usa shape: rounded (predeterminada), square o circular.
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.
Tamaño
La prop size define la altura, el tamaño de fuente y el padding horizontal de la entrada. Puede establecerse en small, medium o large. El valor por defecto es medium.
Contenido antes y después
contentBefore y contentAfter renderizan contenido dentro del contenedor, antes y después de la entrada. Aceptan un string, un snippet o un componente como un icono.
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.
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.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Forma de la superficie del campo, incluidos su borde y el indicador de foco. |
type | TextBoxTypes | 'text' | El tipo del elemento input. |
value bindable | string | number | El valor actual del input. | |
wrapperRef bindable | HTMLDivElement | null | La referencia DOM del elemento contenedor. | |
ref bindable | HTMLInputElement | null | La referencia DOM del elemento de entrada. | |
placeholder | string | 'Fluent TextBox' | 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 | Hace que el input ocupe todo el ancho del contenedor. | |
contentBefore | string | Snippet | Component | Contenido que se renderiza antes del input, dentro del wrapper. | |
contentAfter | string | Snippet | Component | Contenido que se renderiza después del input, dentro del wrapper. | |
size | 'small' | 'medium' | 'large' | 'medium' | El tamaño del elemento input. |
textChanged | (e: Event & unknown, text: string) => void | Ocurre cuando cambia el contenido del text box. | |
querySubmitted | (e: MouseEvent | KeyboardEvent, query: string) => void | El evento QuerySubmitted ocurre cuando: 1. El tipo del input es 'search'. 2. Con el foco en el text box, se pulsa Enter o se hace clic en el icono de búsqueda. | |
onClear | (e: MouseEvent) => void | Ocurre cuando se hace clic en el botón de limpiar. | |
children | Snippet | Los elementos hijos que se renderizan dentro de la entrada. | |
wrapperAttributes | HTMLAttributes | Los atributos que se aplican al elemento wrapper. | |
HTMLInputAttributes without size |