ILLA home page
  1. Botón de radio

​

Un botón de radio es seleccionar el componente de entrada que permite a los usuarios seleccionar una opción de un grupo de opciones predefinidas. Aparece como un botón cuadrado redondeado, que puede ser seleccionado o deseleccionado por los usuarios. Cuando se selecciona un botón de radio, todos los demás botones de radio del mismo grupo son automáticamente deseleccionados, asegurando que sólo una opción puede ser seleccionada a la vez. Los botones de radio se utilizan comúnmente en formularios, cuestionarios y encuestas para ayudar a los usuarios a elegir entre una lista de opciones.

​
Propiedades

​
Opciones manuales

Añadir nuevas opciones o eliminar opciones manualmente y configurar las opciones una por una. Las propiedades de las opciones son las siguientes:

PropiedadesDescripción
EtiquetaEl texto mostrado para la opción
ValorEl valor asociado con la opción
DeshabilitadoSi la opción está desactivada para la selección

​
Opciones mapeadas

También puede añadir opciones desde una fuente de datos asignando la etiqueta y las propiedades de valor a los campos de datos correspondientes. Puede obtener opciones dinámicamente de la base de datos de esta manera. Al final de este artículo demostraremos cómo utilizarlo a través de un ejemplo.

PropiedadesDescripción
Fuente de datosEstablecer la fuente de datos de opciones
EtiquetaUtilice {{item}} para establecer la etiqueta de opciones
ValorUtilice {{item}} para establecer el valor de las opciones
DeshabilitadoUtilice {{item}} para establecer si la opción está deshabilitada para la selección

​
Otras propiedades

PropiedadesDescripción
Valor por defectoEl valor inicial del componente. Puede cambiar dinámicamente el valor inicial escribiendo JavaScript en {{}}.
Marcador de posiciónEl valor se mostrará cuando el campo de entrada esté vacío.
EtiquetaEl nombre del campo mostrado al usuario
SugerenciaUn título usado para describir el campo en detalle
Etiqueta ocultaEstablecer si mostrar o no la etiqueta
PosiciónDefine la posición de la etiqueta relativa al componente
AlineaciónEstablecer la alineación de la etiqueta
WidthCuando la etiqueta está en el lado izquierdo del componente, establezca la proporción de ancho de la etiqueta
Manejador del EventoActivar consultas, componentes de control o llamar a otras APIs en respuesta a eventos de componentes.
DeshabilitadoControla el estado de si el componente está desactivado. El componente no puede ser modificado o enfocado cuando está desactivado.
Sólo lecturaControlar el estado de si el componente es de sólo lectura. Un componente de sólo lectura puede ser seleccionado y enfocado, pero no puede ser modificado.
Mostrar botón de borrarEstablecer si mostrar o no el botón de borrar
SugerenciaLos usuarios pueden ingresar la descripción del componente aquí. La descripción se mostrará cuando esté enfocada. Formato Markdown soportado.
Campo requeridoVálido sólo cuando el interruptor está encendido.
Regla personalizadaEditor.inspect.setter_tooltip.regla personalizada
Ocultar mensaje de validaciónPuede ocultar el mensaje de error cambiando el estado oculto cuando el valor de entrada es incorrecto. Puedes cambiar dinámicamente el estado oculto por JavaScript.
Clave de FormularioEspecifique una clave de un componente de formulario de envoltura al construir el atributo de datos.
HiddenControlar dinámicamente si el componente está oculto. Puede cambiar el estado oculto a través de un valor booleano dinámico.
Color del temaPara seleccionar el color del tema del componente

​
Método

Puede usar otros componentes para controlar el componente. Apoyamos los tres métodos siguientes:

​
setValue

Para establecer la opción seleccionada, por ejemplo, {{”value1”}}

PropiedadesDescripción
ValorUna cadena de valor de opción seleccionada.

​
limpiarValor

Borrar las opciones seleccionadas

​
validate

Para verificar que la información de entrada es legal

​
clearValidate

Para borrar el mensaje de validación

​
Controlador de eventos

Apoyamos escuchar el evento onChange del componente del botón de radio.

Cuando la opción seleccionada cambia, puede desencadenar una acción especificada. Esto significa que cuando un usuario selecciona una opción diferente de un grupo de botones de radio, se puede realizar una acción particular basada en la opción seleccionada. Por ejemplo, en un formulario web, seleccionar una opción diferente puede activar la visualización de diferentes campos de formulario o la presentación del formulario a un destino diferente. De esta forma, la opción seleccionada por el usuario puede afectar el comportamiento del software o aplicación web que está utilizando. La capacidad de desencadenar acciones específicas basadas en la entrada del usuario es un aspecto importante del diseño interactivo de software y puede mejorar la usabilidad y funcionalidad del software.

​
Datos

El componente tiene algunos datos comúnmente utilizados, que se pueden llamar a través de {{componentName.propertyName}} en la aplicación.

Nombre de la propiedadDescripción
valoruna cadena de valor de la opción seleccionada

​
Caso de uso

A continuación, demostraremos cómo usar el modo mapeado para obtener opciones dinámicamente.

​
Paso 1 Añadir una acción

Hemos creado una tabla llamada selection, incluyendo 5 columnas: options_en, options_jp, options_zh, options_kr, value. Almacenamos los valores de opciones en value y almacenamos la etiqueta de opciones en diferentes idiomas en otras columnas.

Crea una acción para listar todos los datos en selección llamada postgresql1

seleccionar * de la selección

​
Paso 2 Configurar el componente

  1. Establecer las fuentes de datos a {{postgresql1.data}}

  2. Configurar la etiqueta para cambiar la etiqueta basada en el idioma.

    1. Utilice {{ item.columnName }} para establecer la columna.
    2. Utilice {{ currentUserInfo.language }} para establecer el idioma que utilizan los usuarios en ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
: currentUserInfo.language == 'ko-KR' ? item.options_kr 
: currentUserInfo.language == 'zh-CN' ? item.options_zh 
: item.options_es }}