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-стилей компонента	array
ColSpan	Ширина в столбцах для каждой ячейки при использовании свойства Mode со значением td. Индекс элемента в массиве равен индексу ячейки в строке	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
CurrentPage	Номер отображаемого элемента компонента на текущей странице	number	0
DragAcceptValueName	Имя поля данных, по которому происходит проверка в свойстве DragAcceptValues	string
DragAcceptValues	Массив для поиска значения свойства DragAcceptValueName. Используется для вычисления возможности бросания элемента после перетаскивания. Использование этого свойства отключает использование свойства DragGroupName	array
DragClassName	CSS-класс, добавляемый перетаскиваемому элементу	string
DragGroupName	Имя группы, между элементами которой возможно перетаскивание	string	Default
DragHandleSelector	CSS-селектор элемента для перетаскивания	string
DropClassName	CSS-класс, добавляемый перетаскиваемому элементу перед сбросом	string
FullScroll	Признак отрисовки полосы прокрутки с учетом количества повторяющихся элементов компонента	boolean	True
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	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	Обработчик события нажатия кнопки мыши	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
OnUnmount	Обработчик события Unmount	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	False
Value	Массив объектов входных данных	array
Virtualized	Признак отрисовки только видимого содержимого компонента	boolean	False
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>

Свойства​

Примеры​

Свойства

Примеры