Select

Отображает раскрывающийся список вариантов с возможностью выбора

Позволяет выбирать один вариант или множество вариантов из списка. Может иметь поле поиска. При включенном свойстве AutoTooltip обрезает длинный текст и отображает троеточие и подсказку с полным текстом при наведении указателя мыши. Имеет следующие варианты отображения:

Select: установка метки напротив выбранного варианта;
Underline: подчеркивание выбранного варианта;
Flat: выбор варианта по щелчку на кнопке.

  <Select
    Label="С поиском"
    Model-var="foo2"
    HasSearch={true}
    State-var={"_state"}
    Error={foo => {
      if (foo === 2) return 'Значение 2 нельзя выбирать';
    }}
    KeyField="key"
    ValueField="value"
  />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
AutoTooltip	Признак отображения подсказки к варианту при невозможности отображения полного текста варианта по ширине области компонента	boolean	False
AutoTooltipLineClamp	Количество строк для подсказки	number	2
Autofocus	Признак установки фокуса на компонент	boolean	False
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
DataHint	Подсказка к компоненту	string
Disabled	Признак запрета на редактирование компонента	boolean	False
EmptyListText	Замещающий текст при пустом списке вариантов	string
Error	Тескт ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки	boolean	False
ErrorMessage	Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error	string
Focused	Признак фокусировки на компоненте	boolean	False
HasClean	Признак возможности удаления ранее выбранного варианта	boolean	True
HasMultipleSearch	Признак наличия поля поиска при множественном выборе	boolean	False
HasSearch	Признак наличия поля поиска	boolean	False
Hidden	Признак состояния компонента Скрыт	boolean	False
HighlightError	Признак подсвечивания ошибки	boolean	True
Hint	Подсказка над компонентом	string
HintPosition	Сторона — правая или левая — для отображения подсказки	enum	right	`left` - Слева `right` - Справа `top` - Сверху `bottom` - Снизу `topRight` - Сверху справа `topLeft` - Сверху слева `bottomRight` - Снизу справа `bottomLeft` - Снизу слева
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
ItemAlias	Идентификатор повторяющегося набора данных	string	item
ItemIndexVariable	Имя переменной для доступа к набору данных текущей итерации	string	i
KeyField	Значение ключа для отрисовки компонента	string
Label	Надпись на компоненте	string
MaxHeightOptionsList	Максимальная высота (в пикселях) раскрытого списка вариантов	number	520
MaxLength	Максимальная длина вводимой строки	number	30
Model	Псевдоним свойств Value и OutputValue	any
Multiple	Признак возможности выбора нескольких вариантов; при установке в true свойства Model, Value, OutputValue являются массивами ключей	boolean	False
NoWriteOnInit	Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента	boolean	False
OnBlur	Параметры команды, отправляемой при потере фокуса компонентом	undefined
OnChange	Параметры команды, отправляемой при изменении компонента, например, при вводе текста, выборе из списка	undefined
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnDelay	Параметры команды, отправляемой по истечении секунды (для предотвращения ложного срабатывания обработчика события) после последнего изменения модели данных	undefined
OnEnterKeyDown	Параметры команды, отправляемой по нажатию Enter	undefined
OnFocus	Обработчик события раскрытия списка вариантов	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnSearchUpdate	Обработчик события ввода текста в поле поиска	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputSearchValue	Имя переменной для сохранения значения, введенного в поле поиска	string
OutputState	Имя переменной для записи информации, относящейся к состоянию компонента, но не относящейся к данным	any
OutputValue	Привязка отрисованного компонента к модели	any
PortalForOptions	Признак отрисовки списка вариантов отдельно от родительского узла	boolean	True
ReadOnly	Признак запрета на редактирование компонента c возможностью копирования содержимого	boolean	False
Required	Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от надписи	boolean	False
SearchPlaceholder	Заполнитель для строки поиска	string
SearchUpdateDebounce	Время задержки (в миллисекундах) после ввода текста в поле поиска до вызова обработчика события OnSearchUpdate	number	0
ShowOptionsList	Признак раскрытого списка вариантов при загрузке страницы	boolean	False
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
State	Массив объектов допустимых значений	array
Style	Варианты отображения компонента	enum	Select	`Select` - Установка метки напротив выбранного варианта `Underline` - Подчеркивание выбранного варианта `Flat` - Выбор варианта по щелчку на кнопке
Text	Заполнитель (Placeholder)	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Validation	Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error	boolean	False
Value	Привязка модели к отрисованному компоненту	any
ValueField	Ключ для записи в модель	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True
WriteMode	Имя события, по которому меняется значение переменной состояния (экранной формы), переданной в качестве OutputValue	enum		- Режим ввода без контроля состояния компонента

Примеры

Данные:

  
  "foo": 1, 
  "foo3": [1], 
  "_state": [
    { "key": 1, "value": "Бронницы, Московская область" },
    { "key": 2, "value": "Торжок, Тверская область" },
    { "key": 3, "value": "Санкт-Петербург, Ленинградская область" },
    { "key": 4, "value": "Москва" },
    { "key": 5, "value": "Бобров, Воронежская область" }
  ],
  "customItems": [
    {
        "id": 27,
        "uuid": "ca6aba2e-8e26-4063-82d3-af5aa0fd88a0",
        "value": "10UCB_Electrical1.ifc",
        "fileSize": "20 Мб",
        "fileUploadedAt": "16.08.2023"
    },
    {
        "id": 28,
        "uuid": "95629fe7-69c3-4024-9367-eaf9b371f429",
        "value": "RHosp_SC_01.01_AR21.ifc",
        "fileSize": "4 Мб",
        "fileUploadedAt": "21.08.2023"
    },
    {
        "id": 29,
        "uuid": "fa67541f-1b6d-4214-94cd-48b696112897",
        "value": "RHosp_SS_01.01AR21.ifc",
        "fileSize": "7 Мб",
        "fileUploadedAt": "21.08.2023"
    },
    {
        "id": 87,
        "uuid": "c97f29b2-efbe-4bbf-9572-eab43566a952",
        "value": "K09C1KP2P_R20.ifc",
        "fileSize": "571 Кб",
        "fileUploadedAt": "05.09.2023"
    },
    {
        "id": 296,
        "uuid": "4d6f2ae7-4159-47ab-b498-a0e313388bbb",
        "value": "20UFBElectrical.ifc",
        "fileSize": "41 Мб",
        "fileUploadedAt": "11.09.2023"
    },
    {
        "id": 297,
        "uuid": "ee32efcc-72a8-434c-801c-3030a2b4c474",
        "value": "K09C1KP2P_R20.ifc",
        "fileSize": "60 Мб",
        "fileUploadedAt": "11.09.2023"
    },
    {
        "id": 1051,
        "uuid": "abc67cd6-a558-4616-bd19-5d69be2beb79",
        "value": "20UFB_Radiaton_Monitoring.ifc",
        "fileSize": "220 Кб",
        "fileUploadedAt": "22.09.2023"
    }
]

}

JSX:

<Group CSS={['px-8']}>
<Form AutoMargin={16}> 
  <Select
    Label="custom item"
    Model-var="fuk"
    KeyField="id"
    ValueField="value"
    State-var="customItems"
    ItemAlias="item"
  >
    <Group Slot="ItemTemplate" Mode="Wrap">
      <Group CSS={["mb-4"]}>
        <Text Mode="Regular_14_2" Color="MAIN_9" Value-var="item.value" />
      </Group>
      <Group>
        <Text Mode="Regular_12" Color="GRAY_7" Value-var="item.fileSize" />
        <Text Mode="Regular_12" Color="GRAY_7" Value-var="item.fileUploadedAt" CSS={["pl-4"]}/>
      </Group>
    </Group>
  </Select>
  <Select
    Label="Автотултипы"
    Model-var="foon"
    AutoTooltip={true}
    AutoTooltipLineClamp={5}
    State={[
      { key: 1, value: 'test1' },
      { key: 2, value: 'На этом тексте автоматически показывается тултип если не влезает текст. ' },
      { key: 3, value: 'test1' },
      { key: 4, value: 'На этом тексте автоматически показывается тултип если не влезает текст. ' },
      { key: 5, value: 'test1' },
      { key: 6, value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' },
      { key: 7, value: 'test1' },
  ]}
    KeyField="key"
    ValueField="value"
  />
  <Select
    Label="Disabled"
    Model-var="foo"
    State-var={"_state"}
    Error={foo => {
      if (foo === 2) return 'Значение 2 нельзя выбирать';
    }}
    KeyField="key"
    ValueField="value"
    Disabled={true}
  />
  <Select
    ReadOnly={true}
    Label="ReadOnly"
    Model-var="foo"
    State-var={"_state"}
    KeyField="key"
    ValueField="value"
  />
  <Select
    Label="С поиском"
    Model-var="foo2"
    HasSearch={true}
    State-var={"_state"}
    Error={foo => {
      if (foo === 2) return 'Значение 2 нельзя выбирать';
    }}
    KeyField="key"
    ValueField="value"
  />
  <Select
    Label="Множественный выбор с возможностью ввода значений"
    Model-var="foo3"
    State-var={"_state"}
    KeyField="key"
    ValueField="value"
    Multiple={true}
    HasMultipleSearch={true}
    Text="Выберите города…"
  />
</Form>
</Group>

Свойства​

Примеры​

Свойства

Примеры