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

LazyLoad

Реализует отложенную загрузку компонентов Платформы

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

Свойства​

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

Color​

Цвет панели загрузки из палитры RGBA

Тип: string

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

CombineConfig​

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

Тип: object

FallbackHeight​

Высота блока с индикатором загрузки; рекомендуемое значение равно высоте отображаемого компонента

Тип: string

Hidden​

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

Тип: boolean

Hint​

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

Тип: any

Id​

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

Тип: string

LoaderSize​

Размер значка индикатора загрузки

Тип: enum

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

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

Default - 24px Micro - 12px Small - 18px Large - 48px

Mode​

Режимы работы компонента

Тип: enum

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

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

ByOne - Отображение по одному компоненту, которые находятся в видимой области страницы InfinityScrolling - Отображение страницы по достижению последнего компонента видимой области страницы без прокрутки

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

OnPageChange​

Обработчик события изменения страницы; возвращает номер страницы

Тип: undefined

OnUnmount​

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

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

Тип: undefined

RootMargin​

Строка с отступами для видимой области; синтаксис аналогичен CSS-свойству margin — "0px 0px 0px 0px" (top, right, bottom, left), либо значения типа "50px 100px" или "200px"

Тип: string

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

ShowLoader​

Признак отображения индикатора загрузки

Тип: boolean

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

Slot​

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

Тип: string

StartsFrom​

Номер страницы, с которого начинается отображение данных

Тип: number

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

Timeout​

Время ожидания для отображения компонентов в видимой области

Тип: number

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

To​

Номер последней страницы списка элементов для отображения

Тип: number

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

Tooltip​

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

Тип: any

TraceId​

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

Тип: string

Trashhold​

Пороговое значение, при котором будет вызван обработчик события OnPageChange; массив чисел от 0 до 1, либо набор значений, например [0, 0.25, 0.5, 1]. Для элементов, которые могут быть скрыты (например, в аккордеоне), рекомендуется устанавливать минимальное пороговое значение видимости больше 0. В противном случае первый элемент будет всегда загружаться, даже если аккордеон закрыт.

Тип: array

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

Visible​

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

Тип: boolean

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

Примеры​

Скрипты:


const titles = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.',
    'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.'
];
const links = [
    'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU',
    'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg',
    'https://i.ytimg.com/vi/IZvnUTMu-Aw/maxresdefault.jpg'
];
const combinedArray = [];
const chunkSize = 25;
const totalItems = 200;
    
for (let i = 0; i < totalItems; i++) {
    const chunk = [];
    for (let j = 0; j < chunkSize; j++) {
        const index = (i * chunkSize + j) % titles.length;
        chunk.push({
            title: titles[index],
            imageLink: links[index]
        });
    }
    combinedArray.push(chunk);
}
const byOne = [
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
    { title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', imageLink: 'https://play-lh.googleusercontent.com/PCpXdqvUWfCW1mXhH1Y_98yBpgsWxuTSTofy3NGMo9yBTATDyzVkqU580bfSln50bFU' }, 
    { title: 'Pellentesque placerat nunc nec erat scelerisque, sit amet sagittis magna dignissim.', imageLink: 'https://www.atomic-energy.ru/files/images/2022/05/seminar8001.jpg' }, 
    { title: 'Etiam gravida, mauris lobortis cursus vulputate, sapien leo viverra lorem, at placerat ante felis sed lectus.', imageLink: 'https://img4.goodfon.ru/original/1440x900/5/a5/react-framework-logo.jpg' },
];
setState({
    data: [],
    byOne,
    InfinityScrolling: combinedArray
})

JSX:


<Group Mode='ColumnWithScroll'>
  <Accordion 
    ArrowPos="Right" 
    Mode="Default" 
    Value={true}
    CSS={['mb-16']}
  >
    <Group Align="Start" VerticalAlign="Center">
      <Text Value="ByOne" />
    </Group>
    <Group Mode='ColumnWithScroll' Height='70vh'> 
      <Repeater Value-var="byOne" ItemAlias="item">
        <LazyLoad 
          Mode='ByOne'
          Trashhold={[0.01]}
          Timeout={300} 
          LoaderSize='Large'
          FallbackHeight='285px'
        >
          <Group 
            Mode='Column' 
            VerticalAlign='Space-between'
            Height='285px'
          > 
            <Text Max={2} Mode="Medium_32" Value-var="item.title" />
            <Image Width="200px" Value-var="item.imageLink" />
            <Separator Mode='Horizontal' />
          </Group>
        </LazyLoad>
      </Repeater>
    </Group>
  </Accordion>
  <Accordion 
    ArrowPos="Right" 
    Mode="Default" 
    Value={true}
    CSS={['mb-16']}
  >
    <Group Align="Start" VerticalAlign="Center">
      <Text Value="InfinityScrolling" />
    </Group>
    <Group Mode='ColumnWithScroll' Height='70vh'> 
      <LazyLoad 
        Mode='InfinityScrolling'
        LoaderSize='Large'
        RootMargin='0px'
        FallbackHeight='285px'
        StartsFrom={1}
        To={6}
        OnPageChange={ InfinityScrolling => {
          const data = getValue('data');
          const currentPage = getEvent().page;
          if ( currentPage === 1 ) {
            currentData = InfinityScrolling[currentPage]
          } else {
            currentData = [ 
              ...data,
              ...InfinityScrolling[currentPage + 1], 
            ]
          }
          setState({ data: currentData, currentPage });
        }}
      >
        <Repeater Value-var='data' ItemAlias="item">
          <Group 
            Mode='Column' 
            VerticalAlign='Space-between'
            Height='auto'
          > 
            <Text Max={2} Mode="Medium_32" Value-var="item.title" />
            <Image Width="200px" Value-var="item.imageLink" />
            <Separator Mode='Horizontal' />
          </Group>
        </Repeater>
      </LazyLoad>
    </Group>
  </Accordion>
</Group>