Campos de texto
O componente para campos de texto se chama TextField.
AVISO
Deve ser utilizado no lugar do <input> nativo.
Propriedades
Variantes
A prop variant define a variação de estilo aplicada ao campo. O padrão é primary.
<template>
<text-field label="Primary" variant="primary" />
<text-field label="Secondary" variant="secondary" />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Labels
A prop label aceita um texto que identifica a informação a ser preenchida no campo.
<template>
<text-field label="Primeiro nome" />
<text-field label="Sobrenome" />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Placeholders
A prop placeholder aceita um texto que fornece um exemplo ou instrução sobre o formato do dado que pode ser preenchido no campo.
<template>
<text-field label="E-mail" type="email" placeholder="me.nexdom@gmail.com" />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Mensagens
A prop hint recebe um texto que será apresentado como uma dica para oferecer mais instruções ao usuário que virá a preencher o campo.
<template>
<text-field label="URL" type="url" hint="https://google.com ou http://localhost:8080" />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Estados
Desabilitado
Utilize a prop disabled para indicar ao usuário que não há possibilidade de interação com o campo.
<template>
<text-field label="Desabilitado" disabled />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Somente leitura
Utilize a prop readonly para evitar que o valor presente em um campo seja alterado.
<template>
<text-field modelValue="Valor inicial" label="Somente leitura" readonly />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Carregamento
A prop loading exibe um indicador de carregamento no campo enquanto ativa.
<template>
<text-field label="Carregando" loading />
</template>
<script lang="ts" setup>
import { TextField } from "@nexdom/uimed-vue/components";
</script>Eventos
Atualização
O evento update:modelValue será emitido toda vez que o valor do campo for alterado pelo usuário, repassando o novo valor como uma string.
<template>
<text-field label="Texto" :model-value :hint @update:modelValue="onUpdateValue" />
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { TextField } from "@nexdom/uimed-vue/components";
const modelValue = ref("Me altere!");
const changes = ref(0);
const hint = computed(() => `${changes.value} alteração(ões)`);
function onUpdateValue(newValue: string) {
modelValue.value = newValue;
changes.value++;
}
</script>Playground
Experimente as combinações de props do componente.
Ver também
Consulte a referência de API do TextField para a lista completa de props, slots e eventos.