用法
- 在有效的 AMP 文档之外的独立使用
- 清除选择
属性
- <amp-selector> 上的属性
  - disabled，form，multiple，name
  - keyboard-select-mode
- <amp-selector> 选项上的属性
  - option
  - disabled，selected
活动
- select

重要提示：此文档不适用于你当前选择的格式 stories！

amp-selector

实验性

Bento

描述

表示一个控件，该控件提供一个选项菜单，并让用户从中选择。

必需脚本

AMP Bento（独立）

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

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-selector-1.0.css">

支持的布局

填充固定固定高度不显示响应式容器

用法

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>）。
要允许多个选择，请将 multiple 属性添加到 amp-selector 元素。默认情况下，amp-selector 一次允许一个选择。
要禁用整个 amp-selector，请将 disabled 属性添加到 amp-selector 元素。
当 amp-selector 包含 name 属性并且 amp-selector 在 form 标签内时，如果表单上发生提交事件，则 amp-selector 的行为类似于单选按钮/复选框组，并根据 amp-selector 的名称提交所选值（分配给选项的值）。

示例

<form action="/" method="get" target="_blank" id="form1">
  <amp-selector layout="container" name="single_image_select">
    <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>None of the Above</li>
    </ul>
  </amp-selector>
  <amp-selector layout="container" name="multi_image_select" 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 layout="container" name="multi_image_select_1" 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>
<amp-selector
  layout="container"
  name="multi_image_select_2"
  multiple
  form="form1"
>
  <amp-carousel id="carousel-1" width="400" height="300" type="slides" 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"></amp-img>
  </amp-carousel>
</amp-selector>

在有效的 AMP 文档之外的独立使用

Bento 允许你在非 AMP 页面中使用 AMP 组件，而无需提交完全有效的 AMP。你可以将这些组件放置在使用不支持 AMP 的框架和 CMS 的实现中。有关更多信息，请阅读我们的指南在非 AMP 页面中使用 AMP 组件。

要查找 amp-selector 的独立版本，请参阅bento-selector。

清除选择

要在点击或单击元素时清除所有选择，请在元素上设置on操作属性，并使用 clear 操作方法指定 AMP 选择器 id。

示例

<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 键在 ``中的项目之间更改焦点。用户必须按回车键或空格键才能更改选择。禁用箭头键。
`focus`：Tab 键将焦点移到 ``。用户使用箭头键在项目之间导航。必须按空格键或回车键才能更改选择。
`select`：Tab 键将焦点移到 ``。当用户使用箭头键导航选项时，选择会发生更改。

可以配置此属性以基于媒体查询使用不同的选项。

`<amp-selector>` 选项上的属性

option

指示该选项是可选择的。如果指定了值，则该值的内容将随表单一起提交。

disabled，selected

上面的属性的行为与标准 HTML <option> 元素上的行为相同。

活动

事件可以使用 on 属性在其他 AMP 组件上触发操作。例如，on="select: my-tab.show"

阅读有关AMP 操作和事件的更多信息。

select

当用户选择一个选项时，amp-selector 会触发 select 事件。多选择器和单选择器在选择或取消选择选项时触发此事件。点击禁用的选项不会触发 select 事件。

`event.targetOption` 包含所选元素的 option 属性值。
`event.selectedOptions` 包含所有选定元素的 option 属性值的数组。

需要更多帮助？

你已经阅读过此文档多次，但它实际上并没有涵盖你的所有问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的长期参与者，但我们也欢迎你针对你特别感兴趣的问题进行一次性贡献。

前往 GitHub

amp-selector 1.0 0.1

描述