Стилізація
Цей розділ допоможе вам налаштувати зовнішній вигляд і поведінку елементів, керованих плагіном Readmore.js. Нижче наведено детальний опис CSS-класів, data-атрибутів та ARIA-атрибутів, які використовуються в плагіні, разом із рекомендаціями щодо їх стилізації. Ці інструменти дозволяють створювати адаптивний, доступний і візуально привабливий інтерфейс для функції «Читати далі» / «Закрити».
- Контейнер для кнопки «Читати далі» або «Закрити».
- Використовується як обгортка для кнопки, щоб полегшити позиціонування та стилізацію.
- Автоматично ховається, якщо контент коротший за
collapsedHeight
або якщоhideButtonCollapse: true
у розгорнутому стані.
- Призначається самій кнопці, яка відповідає за розгортання або згортання контенту.
- Містить HTML, визначений у параметрах
moreLink
абоlessLink
. - Може бути стилізована для зміни кольору, розміру, фону тощо.
Застосовується до елемента з контентом у режимі CSS-анімації (animationMode: 'css'
).
- Додає плавні переходи для зміни висоти блоку.
- Рекомендується визначити CSS-властивість
transition
для цього класу.
Додається до елемента з контентом у розгорнутому стані в режимі CSS-анімації (animationMode: 'css'
).
- Дозволяє стилізувати розгорнутий стан, наприклад, змінюючи тло чи обводку.
- Корисно для візуального позначення активного стану контенту.
Додається до кнопки «Читати далі» / «Закрити» для відстеження її стану.
Можливі значення:
collapsed
— кнопка у стані згорнутого контенту (показуєmoreLink
).expanded
— кнопка у стані розгорнутого контенту (показуєlessLink
).
Може використовуватися для умовної стилізації кнопки залежно від стану.
Застосовується до елемента з контентом для відстеження його стану.
Можливі значення:
collapsed
— контент згорнутий (обмежений висотоюcollapsedHeight
).expanded
— контент повністю розгорнутий.
Корисно для створення стилів, специфічних для стану блоку.
Додається до елемента з контентом після обробки плагіном.
- Значення:
true
. - Використовується для позначення, що елемент уже ініціалізований, щоб уникнути повторної обробки.
Додається до елемента з контентом і кнопки для позначення їхнього стану.
Можливі значення:
true
— контент розгорнутий.false
— контент згорнутий.
Забезпечує доступність для скрінрідерів, повідомляючи про стан елемента.
Застосовується до елемента з контентом у згорнутому стані.
Можливі значення:
true
— контент прихований (згорнутий, не весь вміст доступний).- Відсутній — контент розгорнутий і повністю видимий.
Допомагає скрінрідерам ігнорувати прихований вміст у згорнутому стані.
Додається до кнопки для зв’язку з елементом контенту.
- Значення: унікальний ідентифікатор елемента контенту.
- Вказує, який елемент контролюється кнопкою, покращуючи навігацію для користувачів із допоміжними технологіями.
Додається до елемента з контентом.
- Значення:
area
. - Позначає елемент як важливу область сторінки для скрінрідерів.
- Режим JS-анімації: Якщо
animationMode: 'js'
, стилі для.cs_readmore-animation
і.cs_readmore-expanded
не потрібні, оскільки анімація керується JavaScript. - Адаптивність: Використовуйте медіа-запити разом із параметром
breakpoints
, щоб змінювати стилі для різних розмірів екрана. - Події: Плагін запускає кастомні події
readmore:beforeToggle
іreadmore:afterToggle
, які можна використовувати для динамічної зміни стилів через JavaScript. - Очищення стилів: При виклику методу
destroy
усі класи, атрибути та стилі, додані плагіном, видаляються, повертаючи елементи до початкового стану.