AMP 元件的現成互動功能

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

本指南概述 AMP 元件程式庫中可用的互動功能。此程式庫提供現成可用的元素，可滿足常見和不常見的使用者介面需求。您可以自訂這些元件及其與使用者的互動方式，以滿足特定需求。請繼續閱讀以瞭解如何運用此功能來降低初始建置成本，同時又不失適應性。

現成的互動式元件

許多可用的元件都僅滿足單一互動目的。大多數元件都可以獨立運作，但 AMP 的核心原則是可組合性。可組合性讓您可以將不同的 AMP 元件組合在一起，以實作自訂的互動。大多數元件都允許使用 amp-mustache 進行範本化。

AMP 提供下列現成的互動式元件

amp-accordion：堆疊的標題清單，可透過使用者互動來摺疊或展開內容區段。
amp-app-banner：跨平台、固定位置橫幅的包裝函式和最小化 UI，顯示安裝應用程式的號召性用語。
amp-autocomplete：在使用者輸入時，建議與使用者輸入內容對應的完整結果。
amp-base-carousel：沿著水平軸或垂直軸顯示多個相似的內容片段。
amp-carousel：沿著水平軸顯示多個內容片段，使用者可以點擊瀏覽。
amp-consent：收集和儲存使用者同意聲明的 UI 控制項。可以根據使用者同意聲明封鎖其他 AMP 元件。
amp-date-picker：用於選取日期的 widget。
amp-form：建立表單，但具有 AMP 強大的功能。
amp-lightbox-gallery：在燈箱圖庫中顯示圖片。
amp-image-lightbox：為指定的圖片提供燈箱效果。
amp-image-slider：用於比較兩張圖片的滑桿。
amp-inline-gallery：沿著水平軸顯示多張圖片，使用者可以點擊瀏覽。
amp-inputmask：為 AMP 表單中的輸入內容提供輸入遮罩功能。
amp-lightbox：在全螢幕「燈箱」模式中顯示元素。
amp-mega-menu：在可展開的容器內顯示頂層導覽內容。
amp-nested-menu：顯示具有任意層級巢狀子選單的向下鑽研式選單。
amp-recaptcha-input：將 reCAPTCHA v3 權杖附加至 AMP 表單提交。
amp-sidebar：一種顯示預期用於暫時存取的 meta 內容 (例如導覽、連結、按鈕、選單) 的方式。
amp-truncate-text：使用省略符號截斷文字，並可選擇性地顯示溢位元素。
amp-user-notification：向使用者顯示可關閉的通知。
amp-video：取代 HTML5 影片標記。
amp-video-docking：在捲動時將影片最小化 (「停駐」) 到角落或自訂位置的功能。

實作模式

使用 AMP 元件可能就像複製並貼上範例程式碼一樣簡單！如果不是，您可以指定功能。每個元件的參考文件都概述了行為和樣式自訂。

如果您找不到現成的解決方案，請思考如何透過組合現有元件來達成所需的行為。組合多個元件或其他 HTML 元素來建立新的元件！AMP 團隊一直對開發人員組成的創新解決方案感到驚豔，其中一些解決方案已在我們的範例中展示 (如果您建立了一些很酷的東西，我們鼓勵您貢獻出來！)。不可能記錄所有組合 AMP 元件的方式，但本節概述了一些最佳實務。

使用屬性自訂行為

透過使用常見的 AMP 屬性和元素專屬屬性，您可以自訂和組合元件，以符合您的需求。請閱讀參考文件以瞭解其特定屬性。

小幅變更行為

有些屬性會變更小幅行為。在以下範例中，amp-accordion 包含 animate 屬性。此屬性會在使用者與每個區段互動時，為每個區段的展開和摺疊新增輕微的「向下捲動」動畫效果。

<amp-accordion animate>
 <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>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
      alt="Photo of a squirrel"
    ></amp-img>
  </section>
</amp-accordion>

在 playground 中開啟此程式碼片段

組合與構成

將 AMP 元件與其他 AMP 元件或 HTML 元素組合，以改善或建構更複雜的互動功能和使用者體驗。例如，組合 amp-form 和 amp-date-picker 以建立預訂流程。

<form method="post" action-xhr="/documentation/examples/api/submit-form-xhr" target="_top">
  <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
  </amp-date-picker>
  <input type="submit">
  <div submit-success>
    Thanks!
  </div>
</form>

在 playground 中開啟此程式碼片段

您可以組合的元件數量沒有限制。以下範例以上一個範例為基礎進行建構。我們新增了 amp-inputmask 以傳達使用者可接受的輸入類型，並新增了 amp-mustache 以轉達成功訊息。

<form class="sample-form" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
  <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
  </amp-date-picker>
  <label>Phone: <input name="code" type="tel" mask="+\1_(000)_000-0000" placeholder="+1 (555) 555-5555" mask-output="alphanumeric"></label>
  <input type="submit">
  <div submit-success>
    <template type="amp-mustache">
      <p>The raw value: {{code}}</p>
      <p>The unmasked value: {{code-unmasked}}</p>
    </template>
  </div>
</form>

在 playground 中開啟此程式碼片段

指南開頭列出的元件是開始使用 AMP 的絕佳方式。熟悉這些元件有助於您概略瞭解 AMP 提供的不同建構區塊。

動作與事件

如互動功能基礎中所述，AMP 公開了全域可用的動作和事件。AMP 的許多元件都有其元件專屬的動作和事件，這些動作和事件可透過使用該元件來提供。AMP 的動作和事件系統是實作更複雜互動模式的強大方式。在以下範例中，我們會在表單成功提交時開啟燈箱。

<form on="submit-success:amp-lightbox-gallery.open(id='squirrel')" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
  <label>Postal code: <input name="code" mask="L0L_0L0" placeholder="A1A 1A1"></label>
  <input type="submit">
  <div submit-success>
    <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" lightbox id="squirrel" alt="Photo of a squirrel"></amp-img>
  </div>
</form>

在 playground 中開啟此程式碼片段

請查看動作和事件總覽頁面，以深入瞭解 AMP 中可用的不同種類的動作和事件。

定義可重複使用的動作

如果您要串連多個動作，可以將它們一起定義為單一且可重複使用的動作。使用 amp-action-macro 元件來建立 AMP 動作巨集。每個動作巨集都需要一個 ID 和要執行的動作。依 ID 呼叫動作巨集，並傳遞會變更其行為的引數。

<amp-action-macro
  id="navigate-action"
  execute="AMP.navigateTo(url='https://amp.dev.org.tw/')"
></amp-action-macro>

<button on="tap:navigate-action.execute()">amp.dev</button>

在 playground 中開啟此程式碼片段

持續自訂

本指南僅提供一些範例，說明您可以使用現成元件來建構互動功能的方式。如果您需要未列出的現成元件，可以提交功能要求或宣告實作意圖，並自行貢獻。否則，請查看建構個人化的互動體驗，以取得 AMP 中高度自訂的整合選項。

作者： @CrystalOnScript
貢獻者： @sbenz