使用 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：用于选择日期的微件。
- 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 video 标签。
- 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 贡献