Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文

amp-accordion

Аккордеон позволяет зрителям ознакомиться с контентом и перейти к интересующему их разделу.

Required Scripts

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Supported Layouts

container

Позволяет зрителям знакомиться с контентом и переходить к нужному разделу. Это удобно на мобильных устройствах, где зачастую даже для просмотра нескольких предложений из раздела требуется прокрутка.

Скрипт <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

Content in 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>
Open this snippet in playground

Дополнительные примеры использования элемента 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub