- Радіогрупа
🧬 Складальні компоненти
Радіогрупа
ContributeРадіогрупа
Раціональна група, також відома як одновибірна група або просто радіогрупа, це компонент, який дозволяє користувачам вибирати лише один варіант зі списку попередньо визначених варіантів. Кожен параметр у групі представлений круговою кнопкою, яку можуть бути обрані або знехтувані користувачами. При виборі однієї з опцій, будь який раніше обраний у групі буде автоматично знято.
Радіогрупи зазвичай використовуються у веб-формах, діалогових вікон, та інші інтерактивні програми, в яких потрібно зробити лише вибір із набору опцій. Вони корисні для запобігання помилкам, які можуть статися, коли користувачі обирають декілька варіантів помилково або плутанині. Крім того, групи кнопок радіо-легко використовувати та візуально інтуїтивно, роблячи їх популярним вибором для дизайнерів і розробників.
Властивості
Ручні налаштування
Додайте нові опції або видаліть параметри вручну і налаштуйте параметри один за одним. Властивості варіантів наступним чином:
| Властивості | Опис |
|---|---|
| Мітка | Текст, відображений для опції |
| Цінність | Значення, пов’язане з опцією |
| Вимкнено | Чи відключена опція для вибору |
Налаштування зіставлених
Ви також можете додати опції з джерела даних, натиснувши на мітки та значення у відповідних полях даних. Ви можете отримати параметри динамічно з бази даних. В кінці цієї статті ми продемонструємо, як використовувати її в прикладі.
| Властивості | Опис |
|---|---|
| Джерело даних | Встановити джерело даних опцій |
| Мітка | Використовуйте {{item}} , щоб встановити мітку опцій |
| Цінність | Використовуйте {{item}} , щоб встановити значення опцій |
| Вимкнено | Використовуйте {{item}} , щоб встановити, чи вимкнена опція для вибору |
Інші властивості
| Властивості | Опис |
|---|---|
| Значення за замовчуванням | Початкове значення компонента. Ви можете динамічно змінити початкове значення, набравши JavaScript у {{}}. |
| Мітка-заповнювач | Значення буде показано, коли поле вводу порожнє. |
| Мітка | Ім’я поля, яке відображається користувачеві |
| Підпис | Заголовок використовується для опису поля докладно |
| Прихована мітка | Вкажіть, чи показувати мітки |
| Позиція | Встановіть позицію мітки щодо компонента |
| Вирівнювання | Встановити вирівнювання мітки |
| Width | Коли етикетка розташована в лівій частині компонента, встановіть співвідношення ширини мітки |
| Обробник подій | Тригер запит, компоненти керування, тобто виклик інших API-файлів у відповідь на події компонента. |
| Вимкнено | Керування статусом того, що компонент відключений. Компонент не може бути змінений або змінений, якщо він вимкнений. |
| Лише для читання | Керування статусом того, чи є компонент лише для читання. Компонент, який доступний лише для читання, може бути вибраний і сфокусований, але не може бути змінений. |
| Показувати кнопку очищення | Вкажіть, чи показувати кнопку Очистити |
| Підказка | Тут можна ввести підказку для компонентів. Підказка буде відображатись при зосередженні. Формат Markdown підтримується. |
| Обов’язкове поле | Дійсний лише при увімкненому перемикачі. |
| Користувацьке правило | призначені для користувача інспекції setter_tooltip.custom_rule |
| Приховати повідомлення перевірки | Ви можете приховати повідомлення про помилку, перемикнувши прихований статус, коли вхідне значення неправильне. Ви можете динамічно змінити прихований стан на JavaScript. |
| Ключ даних форми | Вкажіть ключ форми обгортання компонентів при конструюванні атрибуту даних. |
| Hidden | Динамічне керування, чи прихований компонент в мережі. Ви можете змінити прихований статус за допомогою динамічного логічного значення. |
| Колір теми | Щоб вибрати колір теми компонента |
Метод
Ви можете використовувати інші компоненти для керування компонентами. Ми підтримуємо наступні три методи:
значення набору
Наприклад, щоб встановити вибраний параметр, наприклад, {{”value1”}}
| Властивості | Опис |
|---|---|
| Цінність | Обране значення |
чисте значення
Очистити вибрані параметри
validate
Щоб переконатися, що вхідна інформація є правовою
очистити усі
Щоб очистити повідомлення підтвердження
Обробник подій
Ми підтримуємо прослуховування події onChange радіогрупи.
Якщо вибраний параметр зміниться, він може викликати певну дію. Це означає, що коли користувач вибирає іншу опцію від групи радіо - можна здійснити конкретну дію, засновану на обраній опції. Наприклад, у веб-формі, обирається інша опція, може викликати відображення різних полів форми або подання форми до іншого призначення. Таким чином, вибір користувача може впливати на поведінку програмного забезпечення чи веб-додатку, яку він використовує. Можливість викликати вказані дії на основі вводу користувача є важливим аспектом інтерактивної розробки програмного забезпечення і може покращити зручність і функціональність програмного забезпечення.
Дані
Компонент має найбільш часто використовувані дані, які можна викликати через {{componentName.propertyName}} у додатку.
| Ім’я властивості | Опис |
|---|---|
| значення | Обране значення |
Використати регістр
Далі, ми продемонструємо, як використовувати відображений режим для динамічного отримання варіантів.
Крок 1 Додати дію
Ми створили таблицю з назвою ‘selection, включаючи 5 стовпців: options_en, options_jp, options_zh, options_kr, 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_en }}
