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

Repeater

Отображает повторяющийся набор данных

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

<Repeater Value={[{ title: 1 }, { title: 2 }, { title: 3 }]}>
    <Text Value-var="item.title"/>
</Repeater>

Свойства​

AllowDropClassName​

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

Тип: string

Badge​

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

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

Тип: any

CSS​

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

Тип: array

ColSpan​

Ширина в столбцах для каждой ячейки при использовании свойства Mode со значением td. Индекс элемента в массиве равен индексу ячейки в строке

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

CurrentPage​

Номер отображаемого элемента компонента на текущей странице

Тип: number

DragAcceptValueName​

Имя поля данных, по которому происходит проверка в свойстве DragAcceptValues

Тип: string

DragAcceptValues​

Массив для поиска значения свойства DragAcceptValueName. Используется для вычисления возможности бросания элемента после перетаскивания. Использование этого свойства отключает использование свойства DragGroupName

Тип: array

DragClassName​

CSS-класс, добавляемый перетаскиваемому элементу

Тип: string

DragGroupName​

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

Тип: string

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

DragHandleSelector​

CSS-селектор элемента для перетаскивания

Тип: string

DropClassName​

CSS-класс, добавляемый перетаскиваемому элементу перед сбросом

Тип: string

FullScroll​

Признак отрисовки полосы прокрутки с учетом количества повторяющихся элементов компонента

Тип: boolean

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

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

Hint​

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

Тип: any

Id​

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

Тип: string

ItemAlias​

Идентификатор повторяющегося набора данных

Тип: string

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

ItemCount​

Общее количество элементов компонента; служебное свойство, не требует указания

Тип: number

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

ItemIndexVariable​

Имя переменной для доступа к набору данных текущей итерации

Тип: string

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

ItemsPerPage​

Количество отображаемых элементов компонента на странице

Тип: number

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

Mode​

Вид отображения набора данных

Тип: enum

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

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

ul - Маркированный список ol - Нумерованный список flex - Строка flex-row - Cтрока с гибким распределением содержимого flex-column - Столбец с гибким распределением содержимого tr - Строка таблицы td - Ячейка таблицы list - Список DragDrop - Перетаскивание элементов в наборе данных

NotAllowDropClassName​

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

Тип: string

OnChange​

Обработчик события изменения набора данных

Тип: undefined

OnClick​

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

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

OnClick={() => { // Получение параметра события 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

OnUnmount​

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

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

Тип: undefined

Orientation​

Тип ориентации набора данных при перетаскивании мышью

Тип: enum

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

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

vertical - Вертикальная horizontal - Горизонтальная

OutputValue​

Имя переменной для записи текущей строки повторяющегося набора данных

Тип: array

RowSpan​

Высота в строках для каждой ячейки при использовании свойства Mode со значением td. Индекс элемента в массиве равен индексу строки

Тип: array

SearchFields​

Имена полей данных для фильтрации

Тип: array

SearchRegexp​

Фильтр данных в массиве по совпадению с регулярным выражением

Тип: string

SearchText​

Фильтр данных в массиве по заданному тексту

Тип: string

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

Tooltip​

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

Тип: any

TraceId​

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

Тип: string

Unwrap​

Признак удаления обертки в компоненте

Тип: boolean

Value​

Массив объектов входных данных

Тип: array

Virtualized​

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

Тип: boolean

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

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

Примеры​

Данные:

  "arr": [{ "title": 1 }, { "title": 2 }, { "title": 3 }]
}

JSX:

<Group Mode="Column">
  <Repeater Value-var="arr" Mode="ol">
    <RepeaterItem Alias="item">
      <Text Value-var="item.title" />
    </RepeaterItem>
  </Repeater>
  <Separator />
  <Repeater Value-var="arr" ItemAlias="item">
    <Text Value-var="item.title" />
    <Image Width="12px" Value="https://raw.githubusercontent.com/googlefonts/noto-emoji/f931bea0efd67aefdf6beae404e1f3150c90314e/svg/emoji_u1f4a3.svg" />
  </Repeater>
  /* repeater tests */
  <Repeater Value={[{ title: 1 }, { title: 2 }, { title: 3 }]}>
    <Text Value-var="item.title"/>
  </Repeater>
  <Repeater Value={[{ title: 11 }, { title: 12 }, { title: 13 }]}>
    <Text Value={item=>item.title}/>
  </Repeater>
  <Repeater Value={[{ title: 21 }, { title: 22 }, { title: 23 }]}>
    <Text Value={()=>getValue('item.title')}/>
  </Repeater>
  <Repeater Value={[{ title: 31 }, { title: 32 }, { title: 33 }]}>
    <Text Value={(txt=item.title)=>txt}/>
  </Repeater>
</Group>