Vitral 0.2
Formulário

Textarea

Uma caixa de texto de várias linhas, com o mesmo acabamento de campo do InputText, que pode crescer com o conteúdo.

Testado com WAI-ARIA

Importação

main.ts
import { Textarea } from '@vitral/vue';

Básico

0 / 280
<script setup lang="ts">import { Label, StackPanel, Textarea } from '@vitral/vue';import { ref } from 'vue'; const notes = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="ta-notes">Notes</Label>        <Textarea id="ta-notes" v-model="notes" placeholder="Write something…" aria-describedby="ta-notes-hint" maxlength="280" />        <small id="ta-notes-hint" style="color: var(--vt-text-muted-color)">{{ notes.length }} / 280</small>    </StackPanel></template>

Redimensionamento automático

Sem barra de rolagem e sem alça: a altura acompanha o texto.

<script setup lang="ts">import { Label, StackPanel, Textarea } from '@vitral/vue';import { ref } from 'vue'; const letter = ref('Dear reader,\n\nThis box grows as you type, and shrinks again when you delete.');</script> <template>    <StackPanel spacing="0.375rem" style="width: 24rem">        <Label for="ta-letter">Letter</Label>        <Textarea id="ta-letter" v-model="letter" auto-resize :rows="2" fluid />    </StackPanel></template>

Tamanhos, variantes e estados

<script setup lang="ts">import { Textarea } from '@vitral/vue';</script> <template>    <Textarea placeholder="Small" size="small" :rows="2" aria-label="Small" />    <Textarea placeholder="Filled" variant="filled" :rows="2" aria-label="Filled" />    <Textarea placeholder="Invalid" invalid :rows="2" aria-label="Invalid" />    <Textarea placeholder="Disabled" disabled :rows="2" aria-label="Disabled" />    <Textarea model-value="Read only" readonly :rows="2" aria-label="Read only" /></template>

Fluido

<script setup lang="ts">import { Textarea } from '@vitral/vue';</script> <template>    <Textarea placeholder="Fills its container" fluid aria-label="Fluid" /></template>

API

Lido de packages/vue/src/components/Textarea/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
autoResizebooleanCresce com o conteúdo em vez de rolar, e dispensa a alça de redimensionar.
rowsnumberLinhas de texto visíveis; com `autoResize`, a altura de partida, abaixo da qual nunca encolhe.
resize'vertical' | 'horizontal' | 'both' | 'none'Em que direção o leitor pode arrastar a alça. O padrão vem do tema, que é `vertical`: um campo que preenche o contêiner não tem para onde ir de lado. `both` serve a um com largura própria. `autoResize` tira a alça por completo, já que a caixa decide a própria altura.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Usado nestes templates