Компонент для автоматического скрытия элементов с динамической адаптацией под ширину контейнера.

Поддерживает два режима работы:

• Скрытие с конца (по умолчанию).
• Скрытие с начала.

Настраивается при помощи атрибута reverseOverflowOrder.

Очередность скрытия

Порядок скрываемых элементов задается с помощью атрибута order для директивы KbqOverflowItem.

Постоянно видимые элементы

Если необходимо, чтобы некоторые элементы всегда оставались видимыми, можно использовать атрибут alwaysVisible для директивы KbqOverflowItem.

Выравнивание элементов

Выравнивание элементов внутри контейнера задается с помощью CSS-свойства justify-content.

Скрытие по вертикали

По умолчанию скрытие элементов происходит по горизонтали. Если необходимо скрывать элементы по вертикали, можно использовать атрибут orientation="vertical".

Задержка при скрытии/отображении

Задержка скрытия/отображения элементов задается с помощью атрибута debounceTime. Включение этой опции позитивно сказывается на производительности при большом количестве элементов, либо при частых изменениях размера контейнера.

<div kbqOverflowItems [debounceTime]="300">...</div>

Дополнительная цель для ResizeObserver

Иногда размер контейнера может изменяться не только при изменении размера окна браузера, но и при изменении размеров других элементов на странице (например: Sidebar). Для отслеживания таких изменений можно использовать атрибут additionalResizeObserverTargets. Атрибут принимает либо один элемент, либо массив элементов, изменение размеров которых приведет к пересчету скрытых элементов. По умолчанию отслеживается document.body.

<div kbqOverflowItems [additionalResizeObserverTargets]="sidebarContainerElement">...</div>