Компонент Columns

🌐 Цей документ доступний українською та англійською мовами. Використовуйте перемикач у правому верхньому куті, щоб змінити версію.

1. Опис компонента

Компонент Columns є елементом інтерфейсу який можна використовувати для групування інших компонентів. Використовуйте стовпці, якщо ви хочете відобразити більше одного компонента в одному рядку або щоб заощадити вертикальний простір у формі.

Використовуйте Columns з переліку Оновлених компонентів.

2. Основні функції

Компонент Columns підтримує велику кількість опцій для застосування при взаємодії із формою процесу, які розподілені за вкладками.

  • Display

  • API

  • Conditions

  • Label: назва компонента, яка відображається поряд з ним.

  • Column Properties: налаштування кількості стовпців, які відображатимуться у формі, і вказати параметри ширини, зміщення для кожного стовпця. Після налаштування ви можете легко змінювати порядок стовпців за допомогою функції перетягування без необхідності створювати все з нуля.

  • Hidden: поля, які приховані від користувача, але все ще є частинами форми й будуть передані при відправленні форми. Не забудьте прибрати прапорець в Clear when hidden, інакше будь-яке значення цього компонента буде порожнім.

  • Property Name: ім’я цього поля для API-ендпоінту, не функціональне для цього компонента

  • Advanced Conditions: дозволяють вам налаштовувати складні умови для компонента. Ці умови визначають, коли компонент стає, наприклад. видимим, базуючись на інших компонентах або їх значеннях на формі.

    Ця функція використовує JS-вставки. Детальніше про це див. на сторінці JS-вставки.

  • Simple: виконує тіж самі задачі, що і Advanced Conditions, але дозволяє задати умови в більш простому форматі

3. Формат даних

Submission
// Цей компонент не має даних
Цей компонент може містити внутрішні компоненти, та це не буде впливати на дані цих компонентів. Зверніть увагу, що внутрішні компоненти повинні мати все рівно різні імена (вкладка API поле Property Name).

4. Сценарії використання

  1. Область, в якій розміщено елемент «Columns», ділиться на 12 частин.

  2. Ширина кожної колонки задається в цих частинах.

  3. Offset – відступ на початку колонки.

Приклад:

  1. Якщо ширину першої колонки задати 5, а другої 7, то перша колонка займе 5/12 ширини контейнера, а друга - 7/12 ширини контейнера.

  2. Якщо задати для другої колонки offset=1, а width=6, то між першою та другою колонками буде відступ в 1/12 контейнера.

Рекомендується задавати width и offset таким чином, щоб їх сума була рівна 12. Якщо сума буде більша, то колонки, які не вміщуються по ширині, будуть перенесені на наступний рядок.