首页 » AMP » AMP的即插即用组件

AMP的即插即用组件

AMP 提供了一个庞大的组件库,用于创建常见的小部件和独特的 Web 元素。例如折叠和展开内容部分的手风琴用于收集和存储用户 cookie 同意的 UI 控件。对于我们的第一页,我们将使用amp-base-carousel

AMP的即插即用组件

导入脚本

与 不同amp-img的是,amp-base-carousel组件是扩展组件。扩展组件逻辑不包含在前面讨论的样板代码提供的基本 AMP JS 中。这有助于通过显式仅加载页面使用的组件的 JavaScript 来保持 AMP 页面的轻量和精简。

要使用该amp-base-carousel组件,我们必须导入它的脚本标签。复制下面的标签并将其放在文档的头部。

您可以在其参考文档的顶部找到每个组件的导入脚本。
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

接下来,<amp-img>在第一个元素下包含另一个元素,然后将两个标签都包裹起来<amp-base-carousel>,如下所示:

<amp-base-carousel width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

组件属性

您可能会注意到我们有熟悉的属性widthheight和已layout定义。与 HTML 一样,属性在 AMP 中随处可见。但是,AMP 使用其他属性来自定义组件的行为。有些是常见的元素属性,有些是某些组件特有的。让我们添加loop属性并将其设置为true并包含更多图像:

<amp-base-carousel loop="true"  width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/QrgRXH81DXk/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/8QJSi37vhms/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

loop属性特定于amp-base-carousel并帮助定义其行为。我们可以使用其他属性进一步自定义我们的轮播,例如 at auto-advanceamp-base-carousel您可以在其参考页面上查看可用的属性列表。

发表评论

您的电子邮箱地址不会被公开。