Casilla y radio

Los criterios de casilla y radio responden un sí/no o escogen entre pocas opciones visibles: radio y button-radio eligen una, checkbox es un sí/no (se dibuja como interruptor con el estilo switch) y button-checkbox elige varias. 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 selectores y sugerencias tienen su propia página.

Vista previa en vivo

ClaroOscuro

Controles

Componente

Etiqueta

Tamaño

Por defectoPequeñoGrande

XML

<criteria id="demo"
          component="radio"
          label="Field"
          group="plan"
          value="basic"
          checked="true"
          style="no-label" />
<criteria id="demo2"
          component="radio"
          label="Business"
          group="plan"
          value="business"
          style="no-label" />
<criteria id="demo3"
          component="radio"
          label="Enterprise"
          group="plan"
          value="enterprise"
          style="no-label" />

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	radiobutton-radiocheckboxbutton-checkbox
label	Etiqueta	text
size	Tamaño	smlg
style	Mostrar como interruptor	true / false
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, tamaño, validación) están en la vista general de criterios. Los radios que comparten un group son una sola elección: elegir uno borra los demás. Las opciones de un button-radio y de un button-checkbox vienen de una lista enumerada (initial-load y target-action indican cuál); aquí el servidor está simulado con una lista fija.

Recetas

Campos habituales, dibujados por los mismos componentes.

Grupo de radios

Los radios con el mismo group son una sola elección. Cada uno lleva su propio value, y checked marca el elegido al empezar.

<criteria id="plan1" component="radio" label="Básico" group="plan" value="basic" checked="true" style="no-label" />
<criteria id="plan2" component="radio" label="Empresa" group="plan" value="business" style="no-label" />
<criteria id="plan3" component="radio" label="Corporativo" group="plan" value="enterprise" style="no-label" />

Casilla obligatoria

Una checkbox con validation="required" debe estar marcada antes de enviar el formulario. Úsala para una aceptación, como los términos de un servicio.

<criteria id="terms" component="checkbox" label="Acepto los términos" validation="required" />

Interruptor

Una checkbox con el estilo switch se dibuja como un interruptor. Su label es el texto que lo acompaña.

<criteria id="notify" component="checkbox" label="Avisarme por correo cuando se envíe" style="switch" />

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

• Selectores y sugerencias: los criterios que escogen entre una lista de opciones.
• 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.