“Entrada de Texto”
“Permite a los usuarios ingresar y editar texto.”- "Uso"
- "Props"
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}
/>
);
};
| Propiedades | Tipo | Descripción |
|---|---|---|
| ”className” | string | ”Nombre opcional para estilización adicional” |
| etiqueta | string | ”Representa la etiqueta para la entrada" |
| "onChange" | "función" | "La función que se llama cuando el valor de entrada cambia" |
| "fullWidth” | booleano | ”Indica si la entrada debe ocupar el 100% del ancho” |
| disableHotkeys | booleano | ”Indica si las teclas rápidas están habilitadas para la entrada” |
| error | cadena | ”Representa el mensaje de error que se mostrará.” “Cuando se proporciona, también se añade un icono de error en el lado derecho de la entrada" |
| "onKeyDown" | "función" | "Se llama cuando se presiona una tecla mientras el campo de entrada está enfocado.” “Recibe un React.KeyboardEvent como argumento” |
| RightIcon | ”ComponenteIcono" | "Un componente opcional de icono que se muestra en el lado derecho de la entrada” |
"Entrada de Texto que se ajusta automáticamente”
“Componente de entrada de texto que ajusta automáticamente su altura según el contenido.”- "Uso"
- "Props"
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: "
/>
);
};
| Propiedades | Tipo | Descripción |
|---|---|---|
| ”onValidate" | "función” | La función de devolución de llamada que desea activar cuando el usuario valida la entrada |
| minRows | número | ”El número mínimo de filas para el área de texto” |
| marcador de posición | ”cadena" | "El texto de marcador de posición que deseas mostrar cuando el área de texto está vacía” |
| onFocus | ”función" | "La función de retorno que deseas activar cuando el área de texto gana el foco” |
| variante | ”cadena" | "La variante de la entrada.” “Las opciones incluyen: default, icon, y button” |
| buttonTitle | ”cadena" | "El título para el botón (solo aplicable para la variante de botón)“ |
| valor | ”cadena" | "El valor inicial para el área de texto" |
"Área de Texto”
“Te permite crear entradas de texto de varias líneas.”- "Uso"
- "Props"
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=""
/>
);
};
| Propiedades | Tipo | Descripción |
|---|---|---|
| ”desactivado” | booleano | ”Indica si el área de texto está desactivada” |
| minRows | número | ”Número mínimo de filas visibles para el área de texto." |
| "onChange" | "función” | Función de llamada activada cuando cambia el contenido del área de texto. |
| marcador de posición | cadena | Texto del marcador de posición mostrado cuando el área de texto está vacía. |
| valor | cadena | El valor actual del área de texto. |