AMP HTML 库提供的组件可划分为:

  • 内置:基础库中包含的组件,例如 amp-imgamp-pixel
  • 扩展:相对于基础库而言的扩展组件,必须作为自定义元素明确包含在文档中(例如<script async custom-element="amp-audio" ...)。
  • 实验:已发布但尚不能广泛使用的组件。

若按类别,这些组件则可分别归为:

  • 广告与分析
  • 动态内容
  • 布局
  • 媒体
  • 呈现
  • 社交

广告与分析

组件说明amp-ad一种容器,用于展示广告。amp-ad-exit为 A4A (AMP for Ads) 的广告退出事件提供可配置行为。amp-analytics从 AMP 文档获取分析数据。amp-auto-ads通过使用远程提供的配置文件,向 AMP 网页中动态投放广告。amp-call-tracking动态替换超链接中的电话号码,以启用来电跟踪。amp-experiment可用于在 AMP 文档上进行用户体验实验。amp-pixel一种跟踪像素,用于统计网页浏览量。amp-sticky-ad提供一种方式,以在页面底部持续显示广告内容。

动态内容

组件说明amp-access-laterpay可让发布者轻松集成 LaterPay 微支付平台。amp-access提供 AMP 付费墙和订阅支持。amp-bind允许元素发生变化,以通过数据绑定关系和与 JS 相似的简单表达式来响应用户操作或数据变更。amp-form提供表单支持。amp-gist显示 GitHub Gist。amp-install-serviceworker安装 ServiceWorker。amp-list动态下载数据并使用模板创建列表项。amp-live-list提供一种方式,以实时地显示和更新内容。amp-mustache允许呈现 Mustache.js 模板。amp-selector表示一种控件,可显示选项菜单并让用户从中选择。amp-user-notification向用户显示可关闭的通知。amp-web-push让用户能够订阅网络推送通知。

布局

组件说明amp-accordion提供一种方式,让观看者可以大致了解网页内容并随意跳至想查看的部分。(手风琴)amp-app-banner一个封装容器和极简界面,用于呈现一个跨平台且具有固定位置的横幅,以显示应用安装号召性用语。amp-carousel沿着一条横轴显示多个相似的内容片段。amp-fx-flying-carpet将其子对象封装在一个独特的全屏滚动容器中,可让您在不占用整个视口的情况下展示全屏广告。(背景固定定位)amp-fx-parallax一种属性,可让元素呈现 3D 透视效果。(同上,可以设置视差效果)amp-iframe显示 iframe。amp-lightbox可带来“灯箱”或类似体验。(同模态框)amp-position-observer在用户滚动屏幕并调度可与其他组件一起使用的事件时,监控视口内某个元素的位置。(滚动监听)amp-sidebar提供一种方式,以显示那些供临时访问的元内容,例如导航、链接、按钮、菜单。(侧边栏弹出)

媒体

组件说明amp-3q-player嵌入来自 3Q SDN 的视频。amp-anim管理动画图片,通常是 GIF 格式。amp-apester-media显示 Apester 智能单元。amp-audio替换 HTML5 audio 标记。amp-brid-player显示 Brid.tv 播放器。amp-brightcove显示 Brightcove 视频云或执行播放器。amp-dailymotion显示 Dailymotion 视频。amp-google-vrview-image显示 VR 图片。amp-hulu显示简单的嵌入式 Hulu 视频。amp-ima-video为与 IMA SDK 集成的插播视频广告嵌入一个视频播放器。amp-image-lightbox可带来“图片灯箱”或类似体验。amp-img替换 HTML5 img 标记。amp-imgur显示 Imgur 帖子。amp-izlesene显示 Izlesene 视频。amp-jwplayer显示由云托管的 JW 播放器。amp-kaltura-player显示 Kaltura 的视频平台中使用的 Kaltura 播放器。amp-nexxtv-player显示来自 nexxOMNIA 平台的媒体流。amp-o2-player显示 AOL O2Player。amp-ooyala-player显示 Ooyala 视频。amp-playbuzz显示任何 Playbuzz 内容(例如列表、意见调查,等等)。amp-reach-player显示 Beachfront Reach 视频播放器。amp-soundcloud显示 Soundcloud 剪辑。amp-springboard-player显示 Springboard 平台 视频播放器。amp-video替换 HTML5 video 标记。amp-vimeo显示 Vimeo 视频。amp-youtube显示 YouTube 视频。

呈现

组件说明amp-animation定义并显示动画。amp-dynamic-css-classes在 HTML 元素上添加几个动态 CSS 类名称。(通过域名进行css判断)amp-fit-text放大或缩小字体,以适合给定空间内的内容。(自适应文本框)amp-font触发并监控自定义字体的加载。amp-timeago通过将日期格式设为“多长时间前”(例如 3 小时前)来提供模糊的时间戳。amp-viz-vega显示使用 Vega 可视化语法创建的可视内容。(数据表格)

社交

组件说明amp-facebook-comments嵌入 Facebook 评论插件。amp-facebook-like嵌入 Facebook 的“赞”按钮插件。amp-facebook显示 Facebook 帖子或视频。amp-gfycat显示 Gfycat 视频 GIF。amp-instagram显示 Instagram 嵌入内容。amp-pinterest显示 Pinterest 微件或“Pin”按钮。amp-reddit显示嵌入的 Reddit 评论或帖子。amp-social-share显示社交分享按钮。amp-twitter显示 Twitter 微博。amp-vine显示简单的 Vine 嵌入内容。