Accordion Blocks
Блок Gutenberg для создания адаптивных выпадающих списков аккордеон.
Рейтинги
Последние изменения
February 7, 2022
Версия
1.5.0
Активные установки
20K
Блок Аккордеонов — это простой плагин, который добавляет блок в редактор Gutenberg, позволяющий добавлять выпадающие спискки аккордеона на ваши страницы.
Аккордеоны должны органично вписываться в вашу тему. Однако вы можете добавить пользовательские стили в свою тему.
Особенности
- Добавляет блок в редактор Gutenberg, добавляющий аккордеон на ваш сайт.
- Поддерживает несколько аккордеонов с индивидуальными настройками для каждого элемента аккордеона.
- Полностью адаптивный
- Поддержка идентификаторов элементов и прямых ссылок.
- Поддерживает вложенные аккордеоны.
- Доступно (для пользователей, которым требуется управление навигацией с клавиатуры с вкладками).
Дополнительные функции
- Открывать отдельные элементы аккордеона по умолчанию.
- Отключите автоматическое закрытие элементов аккордеона.
- Вручную закройте элементы, снова щелкнув по заголовку.
- Прокрутите страницу до заголовка при нажатии на нее, чтобы открыть (включая настройку положения смещения прокрутки).
- Установите тег заголовка HTML для элемента (h1–h6, кнопка).
- Установите значения по умолчанию, которые будут применяться ко всем новым элементам аккордеона, или сбросьте значения по умолчанию для конкретного элемента аккордеона.
- Поддерживает добавление пользовательских стилей блоков с помощью
wp.blocks.registerBlockStyle.
Выход
Плагин в конечном итоге выведет следующий HTML (упрощенный для этого примера):
<div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
<h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false">
Title with H2 tag
</h2>
<div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true">
<p>Content</p>
</div>
</div>
Пользовательский CSS
Вы можете использовать следующие классы CSS для настройки внешнего вида аккордеона.
.c-accordion__item {} /* The accordion item container */
.c-accordion__item.is-open {} /* is-open is added to open accordion items */
.c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */
.c-accordion__title {} /* An accordion item title */
.c-accordion__title--button {} /* An accordion item title that is using a `<button>` tag */
.c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */
.c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content {} /* An accordion item content container */
Этот плагин можно скачать и использовать при автономной установке WordPress.