AMP 组件目录
AMP HTML 库由一个基本运行时组成,它将 AMP 的核心功能带到您的页面。如果您想添加其他功能,可以使用一个或多个现成的 AMP 组件来实现。 它们被分类为
精选组件
按类别筛选
广告与分析
amp-ad-custom
提供有效 AMPHTML 广告的另一种方法。
amp-ad-exit
为 AMPHTML 广告提供可配置的广告退出行为。
amp-ad
用于显示广告的容器。
amp-analytics
从 AMP 文档捕获分析数据。
amp-auto-ads
通过使用...动态将广告注入 AMP 页面。
amp-call-tracking
动态替换超链接中的电话号码以启用来电跟踪。
amp-experiment
用于在 AMP 页面上进行用户体验实验。
amp-social-share
用法
amp-sticky-ad
提供一种在页面底部显示和粘贴广告内容的方法。
amp-story-auto-analytics
自动生成故事的分析配置。
动态内容
amp-access-laterpay
Allows publishers to integrate with the LaterPay micropayments platform.
amp-access-poool
Displays a Poool paywall.
amp-access-scroll
Integrates with Scroll membership.
amp-access
Provides an AMP paywall and subscription support.
amp-action-macro
Creates reusable actions.
amp-autocomplete
Suggests completed results corresponding to the user input as they...
amp-bind
Allows elements to mutate in response to user actions or data...
amp-byside-content
Displays dynamic content from the BySide service.
amp-consent
Provides the ability to collect and store a user's consent through...
amp-date-picker
Provides a widget to select dates. The date picker can render as...
amp-form
Allows you to create forms to submit input fields in an AMP document.
amp-geo
Provides an approximate country-level geolocation interface.
amp-gist
Creates an iframe and displays a GitHub Gist.
amp-google-document-embed
Displays a document file supported by Google Drive.
amp-img
Replaces the HTML5 img tag.
amp-inputmask
Provides input masking capabilities to inputs in AMP forms
amp-install-serviceworker
Installs a ServiceWorker for the current page.
amp-layout
A generic, multi-purpose container element that brings AMP's...
amp-link-rewriter
Allows publishers to rewrite URL based on configurable pattern
amp-list
Dynamically downloads data and creates list items using a template.
amp-live-list
Provides a way to display and update content live.
amp-minute-media-player
Displays a Minute Media player.
amp-mraid
Supports interaction with the MRAID host API within Ad webviews in...
amp-mustache
Allows rendering of Mustache templates.
amp-next-page
Infinite scrolling experience for document-level page recommendations.
amp-pixel
A tracking pixel to count page views.
amp-recaptcha-input
Appends a reCAPTCHA v3 token to AMP form submissions.
amp-render
Renders remote or inline data using a template.
amp-script
Runs custom JavaScript in a Web Worker.
amp-selector
Represents a control that presents a menu of options and lets the...
amp-smartlinks
Run Narrativ's Linkmate process inside your AMP page
amp-story-interactive
A rich set of interactive experiences for stories, including...
amp-subscriptions-google
Implements subscription-style access protocol for Subscribe with Google.
amp-subscriptions
Implements subscription-style access protocol.
amp-user-notification
Displays a dismissable notification to the user.
amp-video-docking
Functionality for videos that minimize ("dock") to a corner or a...
amp-web-push
Allows users to subscribe to web push notifications.
布局
amp-accordion
一个堆叠的标题列表,可以折叠或展开内容部分...
amp-app-banner
一个用于跨平台、固定位置的包装器和最简 UI...
amp-base-carousel
沿水平方向显示多个相似的内容片段...
amp-carousel
沿水平轴显示多个相似的内容片段。
amp-fx-collection
提供一系列预设的视觉效果,例如视差。
amp-fx-flying-carpet
将其子元素包装在独特的全屏滚动容器中...
amp-iframe
显示一个 iframe。
amp-image-lightbox
为指定的图像提供灯箱效果。
amp-image-slider
一个用于比较两张图像的滑块。
amp-inline-gallery
沿水平方向显示多个相似的内容片段...
amp-lightbox-gallery
提供“灯箱”体验。在用户交互后,一个UI...
amp-lightbox
在全视口“灯箱”模态中显示元素。
amp-mega-menu
在可展开的容器内显示顶级导航内容。
amp-nested-menu
显示具有任意嵌套子菜单级别的下钻菜单。
amp-orientation-observer
监视视口内元素的朝向,作为...
amp-position-observer
监视用户滚动时视口内元素的位置...
amp-sidebar
提供一种显示旨在临时显示的元内容的方式...
amp-stream-gallery
沿水平方向一次显示多个相似的内容片段...
媒体
amp-3d-gltf
Displays GL Transmission Format (gITF) 3D models.
amp-3q-player
Embeds videos from 3Q SDN.
amp-anim
Manages an animated image, typically a GIF.
amp-apester-media
Displays an Apester smart unit.
amp-audio
Replaces the HTML5 audio tag.
amp-bodymovin-animation
Displays an AirBnB Bodymovin animation player.
amp-brid-player
Displays a Brid.tv player.
amp-brightcove
Displays a Brightcove Video Cloud or Perform player.
amp-connatix-player
Displays a cloud-hosted Connatix Player.
amp-dailymotion
Displays a Dailymotion video.
amp-delight-player
The amp-delight-player element displays a cloud-hosted Delight Player.
amp-embedly-card
Displays an Embedly card.
amp-google-read-aloud-player
Embeds the Google Read Aloud Player.
amp-hulu
Displays an embedded Hulu video.
amp-ima-video
Embeds a video player for instream video ads that are integrated...
amp-imgur
Displays an Imgur post.
amp-izlesene
Displays an Izlesene video.
amp-jwplayer
Displays a cloud-hosted JW Player.
amp-kaltura-player
Displays the Kaltura Player as used in Kaltura's Video Platform.
amp-megaphone
Displays a Megaphone.fm podcast episode or playlist.
amp-mowplayer
Displays a cloud-hosted Mow Player.
amp-nexxtv-player
Displays a media stream from the nexxOMNIA platform.
amp-o2-player
Displays an AOL O2Player.
amp-ooyala-player
Displays an Ooyala video.
amp-playbuzz
Displays any Playbuzz item content (e.g., list, poll, etc.).
amp-powr-player
An amp-powr-player component displays the Powr Player as...
amp-reach-player
Displays a Beachfront Reach video player.
amp-skimlinks
Run skimlinks inside your AMP page.
amp-soundcloud
Displays a Soundcloud clip.
amp-springboard-player
Displays a Springboard Platform video player.
amp-story-360
Embeds 360 images and videos, explorable by gyroscope or...
amp-story-panning-media
Transition an image's position and zoom between pages.
amp-video-iframe
Embeds an iframe containing a video player.
amp-video
Replaces the HTML5 video tag.
amp-vimeo
Displays a Vimeo video.
amp-viqeo-player
Displays a Viqeo video player.
amp-wistia-player
Displays a Wistia video.
amp-yotpo
Embeds a Yotpo on-site widget.
amp-youtube
Displays a YouTube video.
展示
amp-access-fewcents
允许发布商与 Fewcents 小额支付平台集成。
amp-animation
定义并显示动画。
amp-date-countdown
显示到指定日期的倒计时序列。
amp-date-display
amp-date-display 组件显示您可以...的时间数据。
amp-dynamic-css-classes
在 <body> 元素上添加多个动态 CSS 类名。
amp-fit-text
扩展或缩小字体大小,以使内容适合给定的空间。
amp-font
触发并监控 AMP 页面上自定义字体的加载。
amp-mathml
显示 MathML 公式。
amp-pan-zoom
为任意内容提供缩放和平移功能。
amp-slikeplayer
显示云托管的 Slike Player。
amp-story-animation
一个用于在 amp-story 中配置自定义动画的组件。
amp-story-audio-sticker
一个供用户点击以取消故事静音的贴纸。
amp-story-auto-ads
动态地将广告插入到故事中。
amp-story-captions
自定义视频字幕渲染。
amp-story-cta-layer
AMP 故事的单个页面的单个图层,允许...
amp-story-grid-layer
AMP 故事的单个页面的单个图层,用于定位其...
amp-story-page-outlink
一个 CTA 按钮,用于在 AMP 故事页面中一键打开外部链接。
amp-story-page
AMP 故事的单个屏幕。
amp-story-player
一个用于在您自己的网站中嵌入和播放您喜欢的故事的播放器。
amp-story-shopping
AMP 故事页面中可配置的、模板化的购物体验。
amp-story-subscriptions
AMP 故事页面中可配置的、模板化的订阅体验。
amp-story
一种丰富的视觉故事叙述格式。
amp-timeago
通过将日期格式化为过去的时间(例如,几分钟前),提供模糊的时间戳。
amp-truncate-text
使用省略号截断文本,并可选择显示溢出元素。
amp-wordpress-embed
嵌入 WordPress 文章。
社交