'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Editable
Texto que se convierte en un campo al hacer clic: renombra un proyecto, un archivo, un título en el lugar.
import { Editable } from '@alea/ui';
Ejemplos
Renombrar en el lugar
Haz clic en el texto; Enter guarda, Escape cancela. Se rechazan nombres de menos de tres letras.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Multiline
multiline
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-field-bg…--alea-status-danger…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…
Radius
--alea-radius-full…--alea-radius-sm…--alea-radius-xs…
Motion
--alea-motion-duration-fast…--alea-motion-duration-instant…--alea-motion-duration-slow…--alea-motion-ease-out…
Props
Editable props
Texto que se convierte en un campo al hacer clic: renombrar en el lugar. Enter guarda, Escape cancela.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | string | - | Qué es el texto, para lectores de pantalla ("Nombre del proyecto"). |
className | string | - | |
defaultValue | string | '' | El texto al inicio. |
multiline | boolean | - | Un área de texto en lugar de una línea. |
onSave | ((value: string) => boolean | void) | - | Se llama con el nuevo texto al guardar. Devuelve false para rechazarlo (sigue editando, marcado como inválido). |
placeholder | string | 'Empty' | Se muestra mientras está vacío. |
value | string | - | El texto (controlado). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Hover (CSS)Keyboard focus
- Motion
- nudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-editable.alea-editable-text.alea-editable-icon.alea-editable-edit.alea-textarea.alea-input.alea-editable-input.alea-editable-btn- Atributos data
data-empty
Accesibilidad
- El texto es un botón llamado "Etiqueta: valor. Editar"; el campo recibe foco y selecciona el texto.
- Un valor rechazado deja el campo abierto y marcado como inválido; el foco vuelve al texto después de guardar o cancelar.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio (sobre el texto) | Empieza a editar |
| Enter | Guarda (⌘Enter si es multilínea) |
| Escape | Cancela |
Qué hacer y qué evitar
Hacer
- Úsalo donde la gente renombra cosas seguido.
- Devuelve false desde onSave para rechazar un valor.
Evitar
- No lo uses para formularios con varios campos: usa un Form.