Entradas de texto

Los criterios de texto recogen texto libre: una línea (text), un secreto (password), varias líneas (textarea), texto con formato (markdown-editor), un valor para leer (text-view) o un color (color). Debajo están los criterios reales del cliente React de AWE: elige un tipo, cambia sus atributos y el XML de debajo se actualiza. Escribe también en ellos: son campos reales.

Vista previa en vivo

ClaroOscuro

Controles

Componente

Etiqueta

Texto de ayuda

Icono

∅Sin iconousermailsearchcalendar

Tamaño

Por defectoPequeñoGrande

Unidad

Obligatorio

Solo lectura

XML

<criteria id="demo" component="text" label="Field" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
component	Componente	textpasswordtextareamarkdown-editortext-viewcolor
label	Etiqueta	text
placeholder	Texto de ayuda	text
icon	Icono	lucide:userlucide:maillucide:searchlucide:calendar
size	Tamaño	smlg
area-rows	Filas	text
unit	Unidad	text
value	Texto a mostrar	text
validation	Obligatorio	true / false
readonly	Solo lectura	true / false

Eventos y acciones

Acción (type)	Qué hace
reset	Vacía el valor del criterio.
restore	Devuelve el criterio a su valor inicial.
validate	Ejecuta la validación del criterio (obligatorio, formatos) y muestra su error.
set-invalid	Marca el criterio como inválido con el mensaje de la acción.
set-valid	Borra el error de validación del criterio.
copy-criterion-value-clipboard	Copia el valor del criterio al portapapeles.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Los atributos que comparten todos los criterios (etiqueta, texto de ayuda, icono, tamaño, validación) están en la vista general de criterios. El markdown-editor no tiene etiqueta propia: ocupa el ancho de su fila y muestra su placeholder mientras está vacío. El text-view muestra su valor como texto y no es una entrada: no envía nada al servidor.

Recetas

Campos habituales, dibujados por los mismos componentes.

Contraseña con botón para mostrarla

Toda password tiene al final un botón que muestra u oculta lo escrito; el valor y su validación no cambian.

<criteria id="secret" component="password" label="Contraseña" placeholder="Al menos 12 caracteres"
          icon="lucide:lock" validation="required" />

Editor Markdown

El markdown-editor ofrece una barra de herramientas para títulos, énfasis, listas y enlaces. Su valor es el HTML que escribe el editor.

<criteria id="notes" component="markdown-editor" placeholder="Escribe las notas de la versión" />

Color con selector

Un criterio color es un texto hexadecimal con un botón que abre un selector de color. El value es el color con el que arranca el criterio.

<criteria id="brand" component="color" label="Color de marca" value="#4f46e5" />

Eventos y acciones

Un criterio no tiene un evento propio al que escuchar: cada cambio de su valor comprueba las dependencias cuyo dependency-element lo nombra, y pulsar Intro en un campo de texto ejecuta el botón submit de su ventana. Las acciones que actúan sobre criterios:

Acción	Descripción
reset	Vacía el valor del criterio
restore	Devuelve el criterio a su valor inicial
validate	Ejecuta la validación del criterio y muestra su error
set-invalid	Marca el criterio como inválido con el mensaje de la acción
set-valid	Borra el error de validación del criterio
copy-criterion-value-clipboard	Copia el valor del criterio al portapapeles

Más

• Vista general de criterios: los atributos que comparten todos los criterios y las demás familias de entradas.
• Documentación completa de los criterios: todos los tipos, atributos, validaciones y ejemplos.
• Referencia XSD del elemento criteria.