AMP 元件的現成互動功能
重要事項：本文件不適用於您目前選取的格式 stories！
本指南概述 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：一種顯示中繼內容的方式，旨在用於暫時存取，例如導覽、連結、按鈕、選單。
- 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>
組合與構成
將 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>
您可以組合的元件數量沒有限制。以下範例建立在前一個範例的基礎上。我們新增了 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>
指南開頭列出的元件是開始使用 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>
請查看動作和事件總覽頁面，以深入瞭解 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>
持續自訂
本指南僅舉例說明您可以使用現成元件來建構互動功能的幾種方式。如果您需要未列出的現成元件，您可以提交功能要求或宣告實作意圖並貢獻您自己的元件。否則，請查看建構個人化互動體驗，以瞭解 AMP 中高度自訂的整合選項。
-
貢獻者： @sbenz