AMP

amp-selector

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

Скрипт <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Поддерживаемые макеты Все
Примеры Пример amp-selector на сайте AMP By Example.

Поведение

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

  • Элемент amp-selector может содержать любые элементы HTML или компоненты AMP (например, amp-carousel, amp-img и т. п.).
  • Элемент amp-selector не может содержать вложенные элементы amp-selector.
  • Доступные для выбора варианты определяются добавлением в элемент атрибута option и присвоением ему некоторого значения, например <li option='value'></li>.
  • Недоступные варианты определяются добавлением в элемент атрибута disabled, например <li option='d' disabled></li>.
  • Выбранные по умолчанию варианты определяются добавлением в элемент атрибута selected, например <li option='b' selected></li>.
  • Чтобы разрешить множественный выбор, добавьте в элемент amp-selector атрибут multiple. По умолчанию в элементе amp-selector можно выбрать только один вариант.
  • Чтобы отключить весь элемент amp-selector, добавьте в него атрибут disabled.
  • Если элемент amp-selector в теге form содержит атрибут name и если пользователь отправляет форму (т. е. происходит событие submit), то элемент amp-selector ведет себя, как группа переключателей или флажков и отправляет значения, выбранные для варианта.

Пример:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">Ничего из перечисленного</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>

<p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

Отмена выделения

Чтобы отменить все выделения при нажатии на элемент, используйте атрибут действия on в элементе и укажите идентификатор id селектора AMP с методом clear.

Пример:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

Атрибуты

Атрибуты элемента <amp-selector>

disabled, form, multiple, name Эти атрибуты работают так же, как в стандартных элементах HTML select.
keyboard-select-mode Атрибут keyboard-select-mode определяет поведение клавиатуры для вариантов внутри amp-selector.
  • Значение none (по умолчанию): клавиша Tab переключает фокус между элементами в amp-selector. Пользователь должен нажать Ввод или Пробел, чтобы изменить выбор. Клавиши со стрелками не работают.
  • Значение focus: клавиша Tab переключает фокус на amp-selector. Для перемещения между элементами используются клавиши со стрелками. Чтобы изменить выбор, нужно нажать Пробел или Ввод.
  • Значение select: клавиша Tab переключается фокус на amp-selector. Выбранные элементы меняются, когда пользователь переходит между ними с помощью клавиш со стрелками.

Атрибуты вариантов элемента <amp-selector>

option Означает, что вариант доступен для выбора. Если указано значение, оно передается вместе с формой.
disabled, selected Эти атрибуты работают так же, как в стандартных элементах HTML option.

События

События могут активировать действия для компонентов AMP с помощью атрибута on, например on="select: my-tab.show".

Подробнее о действиях и событиях AMP

select Элемент amp-selector активирует событие select, когда пользователь выбирает какой-то вариант. Селекторы множественного и одиночного выбора активируют его при выборе или отмене выбора того или иного варианта. При нажатии на варианты, недоступные для выбора, событие select не происходит.
  • Параметр event.targetOption содержит значение атрибута option выбранного элемента.
  • Параметр event.selectedOptions содержит массив со значениями атрибута option выбранных элементов.

Валидация

С правилами для компонента amp-selector можно ознакомиться в спецификации валидатора 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