#BlackLivesMatter
AMP
  • email

amp-selector

Introduction

amp-selector lets the user choose from a list of options. The contents of the options isn't limited to just text.

Setup

Import the amp-selector component.

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

This sample also demonstrates how to combine amp-selector with forms ...

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

... and amp-bind.

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

Single select

amp-selector defaults to single selection. The option is required for all selectable elements, for example, the divider in the following sample cannot be selected.

<amp-selector class="sample-selector"
  layout="container">
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"
    option="1"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"
    option="2"></amp-img>
  <div class="divider inline-block mx1"></div>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"
    option="3"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"
    option="4"></amp-img>
</amp-selector>

Multi select

Add the attribute multiple to enable multi selection.

<amp-selector layout="container"
  class="sample-selector"
  multiple>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"
    option="1"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"
    option="2"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"
    option="3"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"
    option="4"></amp-img>
</amp-selector>

Disable and pre-select attributes

The following attributes are supported for select elements:

  • disabled: disable an element.
  • selected: pre-select an element.
<amp-selector layout="container"
  class="sample-selector"
  multiple>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"
    option="1"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"
    option="2"
    selected></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"
    option="3"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"
    option="4"
    disabled></amp-img>
</amp-selector>

Disabled amp-selector

Add the attribute disabled to disable the whole selector.

<amp-selector layout="container"
  class="sample-selector"
  disabled>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"></amp-img>
</amp-selector>

Keyboard select modes

Add the attribute keyboard-select-mode to opt into a pre-defined user interaction pattern for amp-selector. By default the value is 'NONE' and displays the following behavior.

<amp-selector layout="container"
  keyboard-select-mode="none"
  class="sample-selector"
  disabled>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"></amp-img>
</amp-selector>

Keyboard select mode: Focus

Add the attribute keyboard-select-mode="focus" so the Tab key gives focus to amp-selector. The user navigates between items with the arrow keys. Must press space or enter to change the selection.

<amp-selector layout="container"
  keyboard-select-mode="focus"
  class="sample-selector"
  disabled>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"></amp-img>
</amp-selector>

Keyboard select mode: Select

Add the attribute keyboard-select-mode="focus" so the Tab key gives focus to amp-selector. The selection changes as the user navigates options with arrow keys.

<amp-selector layout="container"
  keyboard-select-mode="select"
  class="sample-selector"
  disabled>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"></amp-img>
</amp-selector>

Actions

The clear action may be used to clear all selections of an amp-selector.

<amp-selector id="actionsSample"
  layout="container"
  class="sample-selector"
  multiple>
  <amp-img src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
    width="90"
    height="60"
    option="1"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
    width="90"
    height="60"
    option="2"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
    width="90"
    height="60"
    option="3"
    selected></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
    width="90"
    height="60"
    option="4"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_trees_300x225.jpg"
    width="90"
    height="60"
    option="5"
    selected></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/landscape_green_300x200.jpg"
    width="90"
    height="60"
    option="6"></amp-img>
</amp-selector>
<button on="tap:actionsSample.clear">clear</button>
<button on="tap:actionsSample.selectUp">selectUp</button>
<button on="tap:actionsSample.selectUp(delta=2)">selectUp(delta=2)</button>
<button on="tap:actionsSample.selectDown">selectDown</button>
<button on="tap:actionsSample.selectDown(delta=2)">selectDown(delta=2)</button>
<button on="tap:actionsSample.toggle(index=1)">toggle(index=1)</button>
<button on="tap:actionsSample.toggle(index=1, value=true)">toggle(index=1, value=true)</button>

Events

Listen to the select or selectedOptions events to trigger other actions or update amp-state.

Option A
Option B
Option C
Option D
Last selected option:a
All selected option(s): a
<amp-selector multiple
  layout="container"
  class="radio-selector"
  on="select: AMP.setState({
      selectedOption: event.targetOption,
      allSelectedOptions: event.selectedOptions
    })">
  <div option="a"
    selected>Option A</div>
  <div option="b">Option B</div>
  <div option="c">Option C</div>
  <div option="d">Option D</div>
</amp-selector>
<div>Last selected option:<code [text]="selectedOption">a</code></div>
<div>All selected option(s): <code [text]="allSelectedOptions.join(', ')">a</code></div>
需要进一步说明?

如果此页面的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

在 GitHub 上编辑实例