lavezzi1
@lavezzi1

Как вынести в отдельный массив элементы, которые не помещаются я в контейнере?

Здравствуйте. Есть массив элементов (breadcrumbs), нужно вырезать из основного массива элементы которые не помещаются и пушить их в отдельный (для реализации респонсива и вообще если список большой). Подскажите пожалуйста, логику? Или может есть примеры готовые, я увы не нашел...
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
Вам концепт нужен или что?

Могу предложит следующее.

Делаем строку не переносимой на новую строку (nowrap, flex, overflow)
Основной враппер с обрезкой (overflow)
Внутри контейнер с элементами (flex no wrap, white-space nowrap)
Таким образом мы сможем получить ширину враппера и ширину контейнера.
Если ширина внутреннего контейнера меньше враппера — ничего не делаем, всё помещается.
В противном случае проверяем ширину последнего элемента. Если она больше (wrapper_width - first_el_width), то последний слишком широкий. Тогда мы вырезаем все внутренние со второго по предпоследний. В последнем обрезаем длину (можно через css ellipsis).
Если последний элемент не такой широкий, то подсчитываем ширины средних элементов, начиная с предпоследнего до тех пор пока не станет больше или равной разнице ширин контейнера и враппера. Такое количество элементов вырезаем.
Ну и на месте вырезанных элементов можно размещать кнопку с троеточием, по клику на которую будет выпадать список в вырезанными элементами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы