amp-accordion
Description
Аккордеон позволяет зрителям ознакомиться с контентом и перейти к интересующему их разделу.
Required Scripts
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Supported Layouts
Позволяет зрителям знакомиться с контентом и переходить к нужному разделу. Это удобно на мобильных устройствах, где зачастую даже для просмотра нескольких предложений из раздела требуется прокрутка.
Скрипт | <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
Поддерживаемые макеты | container |
Примеры | Аннотированный пример кода для amp-accordion |
Принципы работы
Компонент amp-accordion
позволяет показывать сворачиваемые и разворачиваемые разделы с контентом. Каждый непосредственный дочерний элемент компонента amp-accordion
представляет собой раздел аккордеона. Каждый из этих узлов должен быть тегом <section>
.
- Компонент
amp-accordion
может содержать по меньшей мере один элемент<section>
в качестве своих непосредственных дочерних элементов. - Каждый элемент
<section>
должен содержать два непосредственных дочерних элемента. - Поскольку первый дочерний элемент в разделе представляет собой заголовок этого раздела, это должен быть элемент, такой как
h1
,h2
,h6
,header
. - Вторым дочерним элементом в разделе может быть любой тег, который совместим с AMPHTML и представляет контент этого раздела.
- При нажатии на заголовок разворачивается или сворачивается раздел.
- Если какой-либо раздел, относящийся к элементу
amp-accordion
, свернут или развернут, он останется таким же на уровне сеанса. Чтобы состояние раздела не сохранялось, к компонентуamp-accordion
нужно добавить атрибутdisable-session-states
.
Пример: показ компонента accordion
В приведенном ниже примере показаны три раздела, последний из которых разворачивается при загрузке страницы. Чтобы отключить сохранение состояния разделов, установлен атрибут disable-session-states
.
Section 1
Content in section 1.
Section 2
Section 3

<amp-accordion disable-session-states>
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<div>Content in section 2.</div>
</section>
<section expanded>
<h2>Section 3</h2>
<amp-img src="/static/inline-examples/images/squirrel.jpg"
width="320"
height="256"></amp-img>
</section>
</amp-accordion>
Дополнительные примеры использования элемента amp-accordion
приведены на специальном сайте.
События
Перечисленные ниже события будут активироваться в элементах section
, относящихся к аккордеону
.
expand | Это событие активируется в целевом элементе section , который переходит из свернутого состояния в развернутое. Если совершить вызов expand при развернутом состоянии элемента section , событие активировано не будет. |
collapse | Это событие активируется в целевом элементе section , который переходит из развернутого состояния в свернутое. Если совершить вызов collapse при свернутом состоянии элемента section , событие активировано не будет. |
Действия
expand | Это событие активируется в целевом элементе section , который переходит из свернутого состояния в развернутое. Если совершить вызов expand при развернутом состоянии элемента section , событие активировано не будет. |
toggle | Это действие позволяет переключаться между состояниями expanded и collapsed компонента amp-accordion . При вызове без аргументов будут переключены все разделы аккордеона. Для одного раздела можно указать аргумент section , а в качестве значения задать соответствующий элемент id . |
expand | Это действие позволяет развернуть компонент amp-accordion . Если этот компонент уже развернут, он останется без изменений. При вызове без аргументов будут развернуты все разделы аккордеона. Для одного раздела можно указать аргумент section , а в качестве значения задать соответствующий элемент id . |
collapse | Это действие позволяет свернуть компонент amp-accordion . Если этот компонент уже свернут, он останется без изменений. При вызове без аргументов будут свернуты все разделы аккордеона. Для одного раздела можно указать аргумент section , а в качестве значения задать соответствующий элемент id . |
Атрибуты
animate | Если настроить этот атрибут в компоненте <amp-accordion> , при развертывании или сворачивании всех разделов, относящихся аккордеону, будет выполняться анимация. |
disable-session-states | Если добавить этот атрибут в компонент <amp-accordion> , можно отключить сохранение состояния разделов аккордеона. |
expanded | Если настроить этот атрибут в элементе <section> , при загрузке страницы соответствующий раздел будет показываться в развернутом виде. |
expand-single-section | Если добавить этот атрибут в компонент <amp-accordion> , раскрывать больше одного элемента <section> одновременно будет нельзя. Если пользователь развернул одни элемент <section> , все остальные <section> будут свернуты. |
Поддержка стилей
- Настраивать стиль элемента
amp-accordion
можно с помощью селектора этого элемента. - Для элементов
amp-accordion
всегда устанавливается объектdisplay: block
. - Элемент
<section>
, а также элементы заголовка и контента не могут быть плавающими. - Если раздел развернут, элемент
<section>
содержит атрибутexpanded
. - Элемент контента закреплен с помощью объекта
overflow: hidden
и поэтому не может включать полосы прокрутки. - Для полей элементов
<amp-accordion>
,<section>
, заголовка и контента задано значение 0. В специальных стилях это значение можно переопределить. - Для элементов заголовка и контента установлен объект
position: relative
.
Валидация
О правилах для amp-accordion читайте в спецификации валидатора AMP.
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub