Перейти к основному содержимому

Select

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

Позволяет выбирать один вариант или множество вариантов из списка. Может иметь поле поиска. При включенном свойстве AutoTooltip обрезает текст и при наведении указателя мыши отображает многоточие и подсказку с полным текстом. Позволяет задавать высоту раскрытого списка вариантов. Поддерживает шаблонизацию. Шаблон элемента раскрывающегося списка задается в дочернем компоненте, которым должен быть компонент Group. Свойству Slot компонента Group должно быть присвоено значение "ItemTemplate". В шаблоне доступ к данным текущего элемента можно получить через переменную, имя которой определяется свойством ItemAlias. Если значение ItemAlias не передано, по умолчанию используется переменная item.

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

Свойства​

AutoTooltip​

Признак отображения подсказки к варианту при невозможности отображения полного текста варианта из-за ограниченной ширины компонента.

Тип: boolean

AutoTooltipLineClamp​

Количество строк для отображения подсказки.

Тип: number

Значение по умолчанию: 2

Autofocus​

Признак установки фокуса на компонент при загрузке страницы.

Тип: boolean

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. 
// Число после символа "-" (в этом примере представлено числом 4) должно быть кратно величине,
// указанной в параметре, определяющем кратность отступов, 
// в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

DataHint​

Текст, отображаемый при наведении указателя мыши на значок в виде кружка с буквой i. Это свойство актуально только для дочерних компонентов компонента Form и имеет смысл только при одновременном использовании свойства Label компонента.

Тип: string

Disabled​

Признак запрета на редактирование компонента.

Тип: boolean

EmptyListText​

Замещающий текст при пустом списке вариантов.

Тип: string

Error​

Текст ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки. Пример использования Error см. в статье Валидация данных перед отправкой на сервер.

Тип: boolean

ErrorMessage​

Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Атомкод до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error.

Тип: string

Focused​

Признак установки фокуса на компонент в процессе работы приложения.

Тип: boolean

HasClean​

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

Тип: boolean

Значение по умолчанию: True

HasMultipleSearch​

Признак наличия поля поиска при множественном выборе.

Тип: boolean

HasSearch​

Признак наличия поля поиска.

Тип: boolean

Hidden​

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

Тип: boolean

HighlightError​

Признак подсвечивания ошибки.

Тип: boolean

Значение по умолчанию: True

Hint​

Подсказка над компонентом.

Тип: string

HintPosition​

Позиция для отображения текста, определенного в свойстве DataHint.

Тип: enum

Значение по умолчанию: right

Возможные значения:

left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

ItemAlias​

Индекс текущего элемента в массиве данных State.

Тип: string

Значение по умолчанию: item

ItemIndexVariable​

Имя переменной для доступа к индексу текущего элемента в массиве данных State.

Тип: string

Значение по умолчанию: i

KeyField​

Имя поля объекта в массиве State, которое содержит идентификатор текстового значения ValueField, отображаемого в компоненте.

Тип: string

Label​

Надпись над компонентом.

Тип: string

MaxHeightOptionsList​

Максимальная высота (в пикселях) раскрытого списка вариантов.

Тип: number

Значение по умолчанию: 520

MaxLength​

Максимальная длина вводимой строки.

Тип: number

Значение по умолчанию: 30

Model​

Псевдоним свойств Value и OutputValue. Пример использования Model см. в статье Валидация данных перед отправкой на сервер.

Тип: any

Multiple​

Признак возможности выбора нескольких вариантов. Если значение Multiple установлено в true, свойства Model, Value, OutputValue являются массивами ключей.

Тип: boolean

NoWriteOnInit​

Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента.

Тип: boolean

OnBlur​

Обработчик события потери фокуса компонентом. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа FocusEvent.

Пример:

OnBlur={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnChange​

Обработчик события изменения свойства Value компонента. Не имеет параметров.

Пример:

OnChange={() => {
  // Вывод сообщения в консоль браузера
  console.log("Компонент изменен");
  }
}

Тип: undefined

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnDelay​

Обработчик события изменения свойства Value компонента, вызываемый по истечении секунды после последнего изменения Value. Не имеет параметров.

Пример:

OnDelay={() => {
  // Вывод сообщения в консоль браузера
  console.log("Прошло более секунды после изменения компонента");
  }
}

Тип: undefined

OnEnterKeyDown​

Обработчик события нажатия кнопки Enter. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnEnterKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnFocus​

Обработчик события раскрытия списка вариантов. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа FocusEvent.

Пример:

OnFocus={() => {
// Получение параметра события
const event = getEvent();
// Вывод параметра события в консоль браузера
console.log(event);
}}

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown​

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

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnSearchUpdate​

Обработчик события ввода текста в поле поиска. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа Search Event.

Пример:

OnSearchUpdate={() => {
// Получение параметра события
const event = getEvent();
// Вывод параметра события в консоль браузера
console.log(event);
}}

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

OutputSearchValue​

Имя переменной для сохранения значения, введенного в поле поиска.

Тип: string

OutputState​

Имя переменной для записи результата валидации выбранного или введенного в компоненте значения. Пример использования OutputState см. в статье Валидация данных перед отправкой на сервер.

Тип: any

OutputValue​

Выходной параметр компонента: введенное или выбранное в компоненте значение.

Тип: any

PortalForOptions​

Признак отрисовки списка вариантов отдельно от родительского узла.

Тип: boolean

Значение по умолчанию: True

ReadOnly​

Признак запрета на редактирование компонента c возможностью копирования содержимого.

Тип: boolean

Required​

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

Тип: boolean

SearchPlaceholder​

Заполнитель для строки поиска.

Тип: string

SearchUpdateDebounce​

Время задержки (в миллисекундах) после ввода текста в поле поиска до вызова обработчика события OnSearchUpdate.

Тип: number

ShowOptionsList​

Признак раскрытого списка вариантов при загрузке страницы.

Тип: boolean

Slot​

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

State​

Массив объектов, среди полей которых есть хотя бы одно поле, содержащее текст ValueField для отображения, и хотя бы одно поле, содержащее идентификатор KeyField этого текста.

Тип: array

Text​

Заполнитель или замещающий текст.

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода при изменении состояния компонента.

Тип: string

Validation​

Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Атомкод до 3.0. Вместо Validation рекомендуется использовать свойство Error.

Тип: boolean

Value​

Входной параметр компонента: введенное или выбранное в компоненте значение.

Тип: any

ValueField​

Имя поля объекта в массиве State, которое содержит текст, отображаемый в компоненте.

Тип: string

Visible​

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

Тип: boolean

Значение по умолчанию: True

Примеры​

Данные:

  
  "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: 'test3' },
      { key: 4, value: 'Текст, не помещающийся в заданную область, автоматически имеет подсказку' },
      { key: 5, value: 'test5' },
      { 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: 'test7' },
  ]}
    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>