AMP
繁體中文 (ZH-TW)
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 简体中文 Polski Tiếng việt

使用 AMP 組件的現成互動功能

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

現成的互動式組件

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

AMP 提供以下現成的互動式組件

實作模式

使用 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 中高度自訂的整合選項。