LxInputNumber

Visão geral

O componente LxInputNumber é utilizado para exibir um campo de entrada de números com diversas opções de personalização, incluindo rótulo, mensagens de erro, texto de ajuda, e validações. Ele também suporta slots para customização do conteúdo do rótulo, mensagem de erro e texto de ajuda.

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxInputNumber } from '@lde/lxcomponents';

const value = ref('');
</script>

<template>
	<LxInputNumber id="'input-number-example'" v-model="value" />
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do campo de entrada.	String	Required
modelValue	Valor do campo de entrada. . Nota: Utilizar a implementação padrão com o v-model.	String ou Number	Required
label	Rótulo do campo de entrada.	String	''
errorText	Texto de erro exibido quando o campo é inválido.	String	''
isInvalid	Indica se o campo está em estado inválido.	Boolean	false
helpText	Texto de ajuda exibido abaixo do campo de entrada.	String	''
required	Indica se o campo é obrigatório.	Boolean	false
bidirectional	Altera o modelValue em eager mode. Nota: Seta um watch em modelValue, caso esteja fora do padrão solicitado (Ex: onlyNumbers), atualiza o modelValue sem que o usuario precise interagir com o input.	Boolean	true
size	Tamanho do campo de entrada ('sm', 'md', 'lg').	String	'md'

Eventos

Nome	Descrição
update:modelValue	Emitido quando o valor do campo de entrada é atualizado. Nota: Utilizar a implementação padrão com o v-model.

Slots

Nome	Descrição
label-content	Conteúdo personalizado para o rótulo do campo de entrada.
error-content	Conteúdo personalizado para a mensagem de erro.
help-content	Conteúdo personalizado para o texto de ajuda.

Atributos

O componente LxInputNumber permite que você passe atributos personalizados para o campo de entrada utilizando fallthrough attributes do Vue. Isso é feito através do uso de useAttrs para herdar atributos não reconhecidos e aplicá-los ao elemento de entrada. Esses atributos serão passados diretamente para o input.

Exemplo de Uso

Veja um exemplo de como passar um placeholder e uma class personalizada para o campo de entrada:

Clique para visualizar o código

<template>
  <LxInputNumber
    id="custom-input"
    v-model="inputValue"
    placeholder="Digite seu texto aqui"
    class="custom-input-class"
  />
</template>

Classes Padrão

O componente LxInputNumber utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do campo de entrada usando ::v-deep com a classe desejada.

Nome	Descrição
lx-input-number-wrapper	Conteúdo personalizado para o container.
lx-input-number-label	Conteúdo personalizado para o rótulo.
lx-input-number	Conteúdo personalizado para o input.
lx-input-number-invalid-message	Conteúdo personalizado para a mensagem de erro.
lx-input-number-help-message	Conteúdo personalizado para o texto de ajuda.

Exemplo de Personalização

Você pode personalizar o estilo do campo de entrada utilizando as classes padrão com o seletor ::v-deep. Veja um exemplo de como alterar o estilo do rótulo do campo de entrada:

Clique para visualizar o código

<style scoped>
::v-deep(.lx-input-number-label) {
  color: #007bff;
  font-weight: bold;
}
</style>

Playground

ID:

Valor:

Rótulo:

Tamanho:SmallMediumLarge

Texto de Erro:

Texto de Ajuda:

Obrigatório

Inválido

Bidirecional

Exemplo de Rótulo Texto de ajuda