Input
O componente Input
e MoneyInput
contém funcionalidades de uma caixa de texto com estilos e controles embutidos para facilitar o desenvolvimento.
Como utilizar
Input padrão
import Input from '@mamba/input';
MoneyInput
import MoneyInput from '@mamba/input/Money.html';
Parâmetros
Parâmetro | Descrição | Tipo | Padrão |
---|
align | Alinha a entrada de acordo com parâmetro (left , right ) | string | 'right' |
alphanumeric | Define o modo de entrada como alfanumérico | boolean | false |
autofocus | Inicia o elemento com foco | boolean | false |
forceFocus | Força o foco no elemento de input | boolean | false |
isFocused | Retorna se o input está focado ou não | boolean | false |
bgColor | Cor de Fundo da Caixa de Entrada | string (hex) | '#fff' |
disabled | Desabilita a entrada de texto | boolean | false |
errorMessage | Define uma mensagem de erro caso a validação falhe | boolean | false |
errorColor | Cor do Texto da Mensagem de Erro | string (hex) | #d5000 |
label | Título da Caixa de Entrada | string | undefined |
readable | Possibilita esconder o texto de Entrada | boolean | false |
type | Tipo de texto de entrada (password /text ) | string | 'text' |
textColor | Cor do Texto da Caixa de Entrada | string (hex) | '#4a4a4a' |
value | Valor de padrão de entrada | string | false |
validation | Adiciona um método de validação | function | undefined |
validateOn | Define em que momento a validação ocorre (input /submit ) | string | 'submit' |
mask | Define uma máscara para o texto | string | null |
Eventos
<Input ...props />
Nome | Descrição | Tipo |
---|
submit | Especifique uma função para receber o evento com mais duas propriedades value(valor do campo) e isValid(Boleano da propriedade validation ) | function(event) |
submitValid | Especifique uma função que irá ser chamada somente quando o campo for inválido no momento do submit | function(event) |
submitInvalid | Especifique uma função que irá ser chamada somente quando o campo for válido no momento do submit | function(event) |
<MoneyInput ...props />
Nome | Descrição | Tipo |
---|
submit | Retorna duas propriedades value(Valor em centavos) e formatted(Valor formatado na moeda) | function(event) |
Métodos
prepend(value)
Adiciona um valor fixo no ínicio do campo de digitação.
append(value)
Adiciona um valor fixo no final do campo de digitação.
focus()
Coloca o foco no componente de input.
blur()
Desfoca o componente de input.
invalidate(message)
Define que o input está com conteúdo inválido e mostra uma mensagem de erro opcional.
mask()
Força uma atualização do conteúdo do Input
para se adequar às máscaras definidas. Use apenas se a prop value
for definida manualmente através de um inputComponent.set({ value: ... })
.
Máscara
Para definir uma máscara de input, basta passar um parâmetro mask
com uma ou mais máscaras. Uma máscara é definida por tokens que, por padrão, são:
#
- DígitoX
- Caractér alfanuméricoS
- LetraA
- Letra maiúsculaa
- Letra minúscula!
- Escapa o caractér do token
Exemplo de CPF/CNPJ:
<Input
label="CPF/CNPJ"
mask={['###.###.###-##', '##.###.###/####-##']}
/>