Войти

Компонент выпадающего списка (DropDown)

Общая информация

Позволяет выбрать одно значение из предложенных в выпадающем списке. Варианты вносятся разработчиком услуги вручную на этапе разработки услуги. Выбранный вариант записывается в черновик, на основании выбора пользователя можно строить зависимости с другими компонентами.

Поддерживаемые экраны

Компонент может быть задействован на экранах типа:

  • Составной экран (CUSTOM);
  • Экран для повторяющегося набора компонентов (REPEATEBLE).

Внешний вид компонента

В услуге


В конструкторе




   Структура компонента DropDown

ВКУ

JSON

 

В конструкторе

Атрибут

Тип

Описание

1

Идентификатор компонента

id

string

Уникальный идентификатор компонента в JSON

2

Удобочитаемое имя компонента

   

Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент

3

Заголовок компонента

label

string

Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле

4

Поле является обязательным для заполнения?

   

Принуждает к взаимодействию с компонентом

 

Атрибуты компонента

     

5

Текст внутри поля, если значение не выбрано

placeholder

string

Добавляет текст-подсказку, отображаемый, пока не выбрано ни одно значение

6

Включение отображения пустого значения с прочерком (первый пункт в выпадающем списке)

isClearable

boolean

Если true, то первым элементом списка добавляет прочерк

7

Подсказка под компонентом вместо надписи «Необязательно»

customUnrecLabel

string

Подсказка под полем, вместо надписи «Необязательно»

 

Настройки для генерации лет

     

8

Значение (‘Current’ или числовое значение года)

value

string

Значение первого года для генерации лет

9

Сколько лет добавить (отрицательное число для вычитания)

add

number

Позволяет устанавливать первый год, путём добавления или отнятия от значения. Например, Current-3 будет генерировать первый год за 3 года до текущего

10

Сколько лет от первого года сгенерировать (отрицательное число, если в обратную сторону)

gen

number

Позволяет установить, сколько элементов списка будет сгенерированно относительно первого года и в какую сторону (возрастания или убывания)

11

Сортировка лет в сгенерированном списке

sort

string

Позволяет сортировать список годов по возрастанию или убыванию

12

Значение по умолчанию пустое? (если нет — будет выбрано первое из списка)

defaultEmpty

boolean

Если false, то по умолчанию в выпадающем списке будет выбран первый элемент

13

Значение с каким индексом показывать по умолчанию?

defaultIndex

number

Позволяет выбрать по умолчанию одно из значений списка

14

Добавить виджет поиска 

localSearch

boolean

Если true, добавляет строку поиска по значениям выпадающего списка

 

Элементы выпадающего списка

     

15

Текст элемента списка

label

string

Текст, который будет отображаться пользователю в выпадающем списке

16

Значение, сохраняемое для элемента

code

string

Значение, которое передается в черновик при выборе элемента

17

Убрать возможность выбора элемента

disable

bool

Позволяет запретить пользователю выбрать элемент списка

18

Если список должен фильтроваться по гендеру, то необходимо для каждого элемента выбрать гендер для отображения

gender

string

Позволяет выбрать пол, для которого будет отображаться элемент списка

19

Название поля, в которое записать ответ пользователя 

fields

array

Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле

20

Установить зависимости с ранее введёнными данными

 

array of objects

Массив объектов, в элементах которых описываются зависимости и правила отображения полей

21

Правила валидации

validation

array

Если добавлено условие для нескольких элементов, то позволяет сделать обязательным заполнение хотя бы одного из них

22

Пояснительные переходы

   

Позволяет отобразить и использовать функционал создания модального окна или массив ссылок на ранее введённые данные

23

Настройка пояснительных переходов в компоненте

   

Настройка модальных окон

24

Вычисляемые аргументы (linkedValues)

attrs

object

Атрибуты компонента, позволяющие реализовать сложный функционал

25

Идентификаторы компонентов, для которых чистить кэш

clearCacheForComponentIds

array

true — включение механизма сохранения данных, введённых пользователем в локальный кэш устройства пользователя (Local Storage)

По умолчанию выключено (false)

Пример JSON структуры компонента передаваемой в DTO

{

  "visited": true,

  "value": "Первый"

}

Вариант использования

Компонент используется в случаях, когда пользователю необходимо выбрать один вариант из конечного списка. Кроме того, подходит для выбора года из списка, в том числе относительно текущего года. Например, для выбора одного из последних пяти лет.

Авторизуйтесь, чтобы оставить комментарий к статье