TextArea

Textarea permite al usuario introducir y editar texto de varias líneas.

Uso

<script>
	import { TextArea } from 'fluentui-svelte';
</script>

<TextArea placeholder="Type your message here..." />

Placeholder

La prop `placeholder` establece el texto de marcador de posición del textarea, proporcionando una pista a los usuarios sobre qué introducir.

Ver Código

<TextArea placeholder="Type your message here..." />

Redimensionado

La prop `resize` controla si el usuario puede redimensionar el textarea. Puede establecerse en `none`, `both`, `horizontal` o `vertical`. Esto te permite controlar el comportamiento de redimensionado del textarea.

Ver Código

<TextArea resize="none" placeholder="No resize" />
<TextArea resize="vertical" placeholder="Vertical resize" />
<TextArea resize="both" placeholder="Resize both" />

On Change

El evento `onChange` se activa cada vez que cambia el contenido del textarea. Puede utilizarse para reaccionar a la entrada del usuario en tiempo real, por ejemplo validando la entrada o actualizando otras partes de la interfaz.

Ver Código

<TextArea onChange={(e) => console.log(e)} placeholder="Type..." />

Propiedades del componente

Name	Type	Default	Description
`value` bindable	`string`	`''`	El valor actual del textarea.
`ref` bindable	`HTMLElement`		La referencia DOM del elemento textarea.
`placeholder`	`string`		El texto de marcador de posición del textarea.
`resize`	`'none'` \| `'both'` \| `'horizontal'` \| `'vertical'`	`'vertical'`	Configura el comportamiento de redimensionado del textarea.
`onChange`	`(e: Event) => void`		Función de callback para el evento change.
`disabled`	`boolean`	`false`	Deshabilita la interacción del usuario.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`wrapperRef` bindable	`HTMLDivElement`		La referencia DOM del elemento contenedor.
`SvelteHTMLElements['textarea']`