Компонент «Показать еще» позволяет сначала скрыть часть текста или элементов списка, показывая только указанную высоту или количество элементов. Есть возможность включать функционал на определенной ширине экрана (брейкпоинте).
Расположение компонента
Файлы компонента находятся в папке src/components/layout/showmore, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В нужном месте вызвать снипет showmore (классы заменить нужными). Или вручную создать структуру, где для оболочки добавлен атрибут data-fls-showmore , для дочернего элемента data-fls-showmore-content и кнопки data-fls-showmore-button . Кнопку сначала нужно скрыть, добавив атрибут hidden и добавить два тега <span> с текстом показа и сокрытия контента:
<div data-fls-showmore class="block"><div data-fls-showmore-content class="block__content"></div><button hidden data-fls-showmore-button type="button" class="block__more"> <span>Показать еще</span> <span>Принять</span> </button></div>К элементу с атрибутом data-fls-showmore-content добавляем текст и другой контент или если это список (UL/OL) элементы списка (LI).
В зависимости от используемого контента (текст или элементы списка) указываем значение для атрибута data -fls -showmore :
- size – ограничение по высоте блока (по умолчанию)
- items – ограничение количества выводимых элементов списка
<div data-fls-showmore="items" class="block"><uldata-fls-showmore-content class="block__content"><li>Пункт №1</li> <li>Пункт №2</li> <li>Пункт №3</li><li>Пункт №4</li><li>Пункт №5</li></ul><button hidden data-fls-showmore-button type="button" class="block__more"> <span>Показать еще</span> <span>Принять</span> </button></div>В зависимости от того, какой тип выбран, указываем значение для атрибута data-fls-showmore-content :
- Высота блока в пикселях (число без px, по умолчанию 150)
- Количество выведенных элементов списка (число по умолчанию 3 )
<div data-fls-showmore class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><buttonhidden data-fls-showmore-button type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>Если контент будет меньше, чем указанное ограничение, кнопка “Показать еще” не будет показана . В противном случае, контент ограничится по высоте или по количеству элементов и при нажатии на кнопку будет показан полностью, также к элементу с атрибутом data-fls-showmore добавится класс —showmore-active (первый спан в кнопке будет скрыт, а второй показан). Повторный клик вернет ограничение.
Есть возможность управлять скоростью развертывания контента, для этого следует указать значение атрибута data-fls-showmore-button в миллисекундах (по умолчанию 500):
<div data-fls-showmore class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><button Hidden data-fls-showmore-button="1000" type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>Включение функционала на определенной ширине экрана
Для того чтобы использовать функционал на определенной ширине экрана, к объекту с атрибутом data-fls-showmore добавляем атрибут data-fls-showmore-media где, через запятую, указываем нужную ширину, а также тип:
- max (по умолчанию) – функционал включается на ширине меньше указанной
- min – функционал включится на ширине больше указанной
<div data-fls-showmore data-fls-showmore-media="768,min" class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipicing elit. Blanditiis explica voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><button Hidden data-fls-showmore-button="1000" type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>