Entrada de Texto
Permite aos usuários inserir e editar texto.- Uso
- Propriedades
import { TextInput } from "@/ui/input/components/TextInput";
export const MyComponent = () => {
const handleChange = (text) => {
console.log("Input changed:", text);
};
const handleKeyDown = (event) => {
console.log("Key pressed:", event.key);
};
return (
<TextInput
className
label="Username"
onChange={handleChange}
fullWidth={false}
disableHotkeys={false}
error="Invalid username"
onKeyDown={handleKeyDown}
RightIcon={null}
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| className | string | Nome opcional para estilização adicional |
| etiqueta | string | Representa o rótulo do campo de entrada |
| onChange | função | A função chamada quando o valor do campo de entrada é alterado |
| larguraCompleta | booleano | Indica se a entrada deve ocupar 100% da largura |
| desativarTeclasDeAtalho | booleano | Indica se as teclas de atalho estão habilitadas para a entrada |
| erro | string | Representa a mensagem de erro a ser exibida. Quando fornecido, também adiciona um ícone de erro no lado direito da entrada |
| aoPressionarTecla | função | Chamado quando uma tecla é pressionada enquanto o campo de entrada está focado. Recebe um React.KeyboardEvent como argumento |
| ÍconeDireito | ComponenteÍcone | Um componente de ícone opcional exibido no lado direito da entrada |
Entrada de Texto com Tamanho Automático
Componente de entrada de texto que ajusta automaticamente sua altura com base no conteúdo.- Uso
- Propriedades
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
export const MyComponent = () => {
return (
<AutosizeTextInput
onValidate={() => console.log("onValidate function fired")}
minRows={1}
placeholder="Write a comment"
onFocus={() => console.log("onFocus function fired")}
variant="icon"
buttonTitle
value="Task: "
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| aoValidar | função | A função de retorno de chamada que você deseja acionar quando o usuário valida a entrada |
| linhasMínimas | número | O número mínimo de linhas para a área de texto |
| espaçoReservado | string | O texto do espaço reservado que você deseja exibir quando a área de texto estiver vazia |
| aoFocar | função | A função de retorno de chamada que você deseja acionar quando a área de texto ganha foco |
| variante | string | A variante da entrada. As opções incluem: default, icon e button |
| títuloDoBotão | string | O título para o botão (aplicável apenas para a variante botão) |
| valor | string | O valor inicial para a área de texto |
Área de Texto
Permite criar entradas de texto de várias linhas.- Uso
- Propriedades
import { TextArea } from "@/ui/input/components/TextArea";
export const MyComponent = () => {
return (
<TextArea
disabled={false}
minRows={4}
onChange={()=>console.log('On change function fired')}
placeholder="Enter text here"
value=""
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| desativado | booleano | Indica se a área de texto está desativada |
| linhasMínimas | número | Número mínimo de linhas visíveis para a área de texto. |
| aoAlterar | função | Função de retorno de chamada acionada quando o conteúdo da área de texto muda |
| texto de preenchimento | string | Texto de preenchimento exibido quando a área de texto está vazia |
| valor | string | O valor atual da área de texto |