使用 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：用于选择日期的窗口小部件。
- 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.org.cn/')"
></amp-action-macro>
<button on="tap:navigate-action.execute()">amp.dev</button>
自定义继续
本指南仅举例说明了可以使用现成组件来构建交互的几种方式。如果您需要未列出的现成组件，可以提交功能请求或声明实施意图并自己贡献。否则，请查看构建个性化交互体验，以了解 AMP 中高度自定义的集成选项。
-
贡献者： @sbenz