- Группа радио
🧬 <unk> ble компоненты
Группа радио
ContributeГруппа радио
радиогруппа, также известная как группа с одним выбором или просто радиогруппа, — это компонент, который позволяет пользователям выбирать только один вариант из списка предопределенных параметров. Каждый параметр в группе представлен круговой кнопкой, которая может быть выбрана пользователями или дезактивирована пользователями. Когда выбран один параметр, все ранее выбранные опции в группе автоматически отключаются.
Группы радиовещания обычно используются в веб-формах, диалоговых окнах, и другие интерактивные приложения, где пользователям необходимо сделать один выбор из набора опций. Они полезны для предотвращения ошибок, которые могут возникать, когда пользователи выбирают несколько опций по ошибке или путанице. Кроме того, группы кнопок радио просты в использовании и интуитивно понятны, что делает их популярным выбором как для разработчиков, так и для разработчиков.
Свойства
Ручные настройки
Добавьте новые параметры или удалите параметры вручную и настройте их по одному. К числу вариантов относятся:
| Свойства | Описание |
|---|---|
| Метка | Текст, отображаемый для опции |
| Значение | Значение, связанное с опцией |
| Отключено | Отключена ли опция для выбора |
Сопоставленные параметры
Вы также можете добавить параметры из источника данных, сопоставляя метки и свойства ценности с соответствующими полями данных. Параметры можно получить динамически из базы данных таким образом. В конце этой статьи мы покажем, как использовать ее с помощью примера.
| Свойства | Описание |
|---|---|
| Источник данных | Задать источник данных параметров |
| Метка | Используйте {{item}} , чтобы установить метку параметров |
| Значение | Используйте {{item}} , чтобы установить значение параметров |
| Отключено | Используйте {{item}} , чтобы установить, отключен ли параметр для выбора |
Другие свойства
| Свойства | Описание |
|---|---|
| Значение по умолчанию | Начальное значение компонента. Вы можете динамически изменить начальное значение, введя JavaScript в {{}}. |
| Заполнитель | Значение будет показано, когда поле ввода пустое. |
| Метка | Имя поля, отображаемого пользователю |
| Подпись | Заголовок, используемый для описания поля в деталях |
| Скрытая метка | Выберите, показывать ли метку |
| Позиция | Установить положение метки относительно компонента |
| Выравнивание | Задать выравнивание метки |
| Width | Когда метка находится в левой части компонента, установите ширину метки |
| Обработчик событий | Триггеры запросов, управляющих компонентов или вызвать другие API в ответ на события компонента. |
| Отключено | Контролировать состояние отключения компонента. Компонент не может быть изменен или сфокусирован, если он отключен. |
| Только для чтения | Контролировать статус только для чтения. Компонент доступен только для чтения, но его нельзя изменить. |
| Показать кнопку “Очистить” | Показывать ли кнопку очистки |
| Подсказка | Пользователи могут ввести подсказку компонента здесь. Подсказка будет показана при фокусировке. Поддерживается формат Markdown. |
| Обязательное поле | Действителен только когда выключатель включен. |
| Пользовательское правило | editor.inspect.setter_tooltip.custom_rule |
| Скрыть сообщение проверки | Вы можете скрыть сообщение об ошибке, переключившись на скрытый статус, когда введенное значение неверно. Вы можете динамически изменить скрытый статус с помощью JavaScript. |
| Ключ данных формы | Укажите ключ компонента оберточной формы при создании атрибута данных. |
| Hidden | Динамическое управление скрытием компонента. Вы можете изменить скрытый статус через динамическое логическое значение. |
| Цвет темы | Чтобы выбрать цвет темы компонента |
Метод
Вы можете использовать другие компоненты для управления компонентом. Мы поддерживаем следующие три метода:
setValue
Чтобы установить выбранную опцию, например, {{”value1”}}
| Свойства | Описание |
|---|---|
| Значение | Выбранное значение |
clearValue
Чтобы очистить выбранные опции
validate
Чтобы убедиться, что введенная информация является законной
очистить
Чтобы очистить сообщение проверки
Обработчик события
Мы поддерживаем прослушивание события «onChange» радиогруппы.
Когда выбранная опция изменяется, она может инициировать указанное действие. Это означает, что если пользователь выбирает другой вариант от радиогруппы, то определенное действие может быть сделано на основе выбранного параметра. Например, в веб-форме выбор другой опции может инициировать отображение различных полей формы или представление формы к другому месту назначения. Таким образом, выбранная пользователем опция может повлиять на поведение используемого им программного обеспечения или веб-приложения. Возможность инициировать указанные действия, основанные на входе пользователя, является важным аспектом интерактивного дизайна программного обеспечения и может улучшить юзабилити и функциональность программного обеспечения.
Данные
Компонент имеет некоторые широко используемые данные, которые можно вызвать через {{componentName.propertyName}} в приложении.
| Название свойства | Описание |
|---|---|
| значение | Выбранное значение |
Вариант использования
Далее мы покажем, как использовать отображенный режим для динамического получения параметров.
Шаг 1 Добавить действие
Мы создали таблицу с именем selection, включая 5 колонок: options_en, options_jp, options_zh, options_kr, value. Мы храним значения опций в value и в других столбцах на разных языках.
Создайте действия для отображения всех данных в папке selection с именем postgresql1
выберите * из спискаШаг 2 Настройка компонента
Установить источники данных в
{{postgresql1.data}}Настройте метку для изменения метки на основе языка.
- Используйте {{ item.columnName }} , чтобы задать столбец.
- Используйте {{ currentUserInfo.language }} , чтобы установить язык, используемый в ILLA.
{{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_ru }}
