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：用於顯示預期用於暫時存取的元內容 (例如導覽、連結、按鈕、選單) 的方式。
- 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