用法
- 在有效的 AMP 文件之外獨立使用
- 清除選取項目
屬性
- <amp-selector> 上的屬性
  - disabled、form、multiple、name
  - keyboard-select-mode
- <amp-selector> 選項上的屬性
  - option
  - disabled、selected
活動
- select

重要事項：本文件不適用於您目前選取的格式廣告！

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">

支援的版面配置

fill fixed fixed-height nodisplay responsive container

用法

AMP selector 是一個控制項，呈現選項清單，讓使用者選擇一個或多個選項；選項的內容不只限定於文字。

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 動作屬性，並使用 AMP Selector id 指定 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 鍵會在 `` 中的項目之間變更焦點。使用者必須按下 Enter 鍵或空格鍵才能變更選取項目。方向鍵已停用。
`focus`：Tab 鍵將焦點放在 ``。使用者可以使用方向鍵在項目之間導覽。必須按下空格鍵或 Enter 鍵才能變更選取項目。
`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

說明