⚠️ Você está vendo a documentação da versão: v1.6
Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
Textinput
O que é?
O Input é um componente responsável por exibir uma área de texto editável para o usuário. Esses campos de textos são usados para coletar entradas que um usuário insere utilizando o teclado.
hidden foi depreciado na versão 1.6.0 do Beagle e será removido em uma versão futura. Utilize o atributo display da propriedade style em seu lugar.A sua estrutura é representada como mostrado abaixo:
| Atributo | Tipo | Obrigatório | Definição |
|---|---|---|---|
| value | String ou Binding | Item referente ao valor de entrada que será digitado na área de texto editável do componente Text Input. | |
| placeholder | String ou Binding | Texto que é exibido quando nada foi inserido no campo de texto editável. | |
| disabled | Boolean | Propriedade para habilitar ou desabilitar o campo. | |
| readOnly | Boolean | Propriedade para determinar se o campo será editável ou somente leitura. | |
| hidden | Boolean | Propriedade que determina se o campo será escondido. O atributo `hidden` foi depreciado na versão 1.6.0 do Beagle e será removido em uma versão futura. Utilize o atributo `display` da propriedade `style` em seu lugar. | |
| type | TextInputType ou Binding | Esse atributo identifica o tipo de texto que iremos receber na área de texto editável. No Android e no iOS, esse campo também atribui o tipo de teclado que será exibido pro usuário. | |
| styleId | String | Recebe uma chave que é registrada no Design System de cada plataforma para fazer customização no componente. | |
| error | String ou <b></b>Binding<b></b> | Esse atributo mostra se o TextInput possui um erro de acordo com uma entrada. | |
| showError | Boolean ou <b></b>Binding<b></b> | Propriedade que identifica se o a String de erro deve ser escondida ou não. | |
| onChange | List <Action> | Array de ações que esse campo pode disparar quando seu valor for alterado. É possível definir uma ação customizada ou qualquer ação já disponível na interface, como por exemplo uma ação que mostra uma mensagem de alerta(Alert). Este atributo é opcional, mas se uma ação for definida aqui ela precisa estar configurada no frontend. | |
| onBlur | List <Action> | Array de ações que esse campo pode disparar quando seu foco é retirado. É possível definir uma ação customizada ou qualquer ação já disponível na interface como, por exemplo, uma ação que mostra uma mensagem de alerta(Alert). Este atributo é opcional, mas se uma ação for definida aqui ela precisa estar configurada no frontend. | |
| onFocus | List <Action> | Array de ações que esse campo pode disparar quando é colocado em foco. É possível definir uma ação customizada ou qualquer ação já disponível na interface como, por exemplo, uma ação que mostra uma mensagem de alerta(Alert). Este atributo é opcional, mas se uma ação for definida aqui ela precisa estar configurada no frontend. |
TextInputType
É um ENUM responsável por definir qual o tipo de entrada de texto.
| Tipo | Definição |
|---|---|
| DATE | Entrada de dados é uma data. |
| Entrada de dados é um email. | |
| PASSWORD | Entrada de dados é uma senha. |
| NUMBER | Entrada de dados somente com números. |
| TEXT | Entrada de dados é um texto. |
Como usar?
Segue abaixo um exemplo de entrada de texto do tipo senha:
TextInput(
value = "my value",
placeholder = "password",
type = TextInputType.PASSWORD,
styleId = "test.input.style",
onChange = listOf(
Alert(
message = "Text value changed."
)
)
)
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.