Selectores y sugerencias

Los criterios de selección dejan al usuario escoger entre una lista de opciones: una (select, suggest) o varias (select-multiple, suggest-multiple, picklist). Debajo están los criterios reales del cliente React de AWE: elige un tipo, cambia sus atributos y el XML de debajo se actualiza. Los criterios de casilla y radio tienen su propia página.

Vista previa en vivo

ClaroOscuro

Controles

Componente

Etiqueta

Texto de ayuda

Icono

∅Sin iconousermailsearchcalendar

Tamaño

Por defectoPequeñoGrande

Botón de borrar

Obligatorio

Solo lectura

XML

<criteria id="demo"
          component="select"
          label="Field"
          initial-load="enum"
          target-action="CountryList" />

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	selectselect-multiplesuggestsuggest-multiplepicklist
label	Etiqueta	text
placeholder	Texto de ayuda	text
icon	Icono	lucide:userlucide:maillucide:searchlucide:calendar
size	Tamaño	smlg
optional	Botón de borrar	true / false
display	Valores elegidos	chip
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. Las opciones vienen de una lista enumerada o de una consulta del servidor (initial-load indica cuál de las dos y target-action cuál). En estos ejemplos el servidor está simulado: un select o un picklist muestra una lista fija, y un suggest o suggest-multiple busca en esa lista mientras escribes, con la misma petición que el cliente envía al servidor. Escribe "an" en la sugerencia para ver cómo filtra.

Recetas

Campos habituales, dibujados por los mismos componentes.

Selector con una lista enumerada

Las opciones de un selector vienen de una lista enumerada o de una consulta del servidor: initial-load indica cuál de las dos y target-action cuál.

<criteria id="country" component="select" label="País" placeholder="Elige un país"
          initial-load="enum" target-action="CountryList" />

Búsqueda al escribir

Un suggest-multiple pide al servidor las opciones que coinciden con lo que escribe el usuario y conserva todas las elegidas. Escribe "a" o "ch" para filtrar la lista.

<criteria id="visited" component="suggest-multiple" label="Países visitados" placeholder="Escribe para buscar"
          initial-load="query" target-action="CountryList" />

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

• Casilla y radio: los criterios de sí/no y de elección única, y el interruptor.
• 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.