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>

События

Перечисленные ниже события будут активироваться в элементах section, относящихся к аккордеону.

Действия

Атрибуты

Поддержка стилей

• Настраивать стиль элемента amp-accordion можно с помощью селектора этого элемента.
• Для элементов amp-accordion всегда устанавливается объект display: block.
• Элемент <section>, а также элементы заголовка и контента не могут быть плавающими.
• Если раздел развернут, элемент <section> содержит атрибут expanded.
• Элемент контента закреплен с помощью объекта overflow: hidden и поэтому не может включать полосы прокрутки.
• Для полей элементов <amp-accordion>, <section>, заголовка и контента задано значение 0. В специальных стилях это значение можно переопределить.
• Для элементов заголовка и контента установлен объект position: relative.

Валидация

О правилах для amp-accordion читайте в спецификации валидатора AMP.