Стилизация
Этот раздел поможет вам настроить внешний вид и поведение элементов, управляемых плагином 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
все классы, атрибуты и стили, добавленные плагином, удаляются, возвращая элементы в исходное состояние.