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

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

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

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

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

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

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

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

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

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

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

<div kbqOverflowItems [additionalResizeObserverTargets]="sidebarContainerElement">...</div>
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.