amp-story-audio-sticker

<script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>

摘要

一个音频贴纸组件，供发布商将其放置在其故事中的任何位置，以便用户单击以取消故事静音。

开发人员可以选择使用 4 个默认贴纸之一，或提供自定义贴纸。贴纸应放在 <amp-story-grid-layer> 中。

属性

size {string} 可选

贴纸的大小。接受的值

• “large”：180 x 180 像素
• “small”：120 x 120 像素

默认值：“small”，如果输入值无效或未提供，则使用该值。

sticker {string} 可选

默认值：“headphone-cat”，如果输入值无效或未提供，则使用该值。

要使用的预制贴纸列表

接受的值	点击前图像	点击后图像
“headphone-cat”
“tape-player”
“loud-speaker”
“audio-cloud”

sticker-style {string} 可选

默认值：无

要使用的贴纸的额外预制样式

接受的值	描述	标题 3
“outline”	在提供的贴纸图像周围添加边框。
“dropshadow”	在提供的贴纸图像的不透明部分周围添加阴影。

通过 CSS 变量自定义贴纸样式

• --story-audio-sticker-outline-color：贴纸轮廓的颜色。
• --story-audio-sticker-dropshadow-color：贴纸阴影的颜色。

如果 CSS 变量设置在故事级别，则颜色将应用于故事中的所有贴纸。如果 CSS 变量设置在故事页面或贴纸级别，则它将仅应用于特定故事页面或特定贴纸上的贴纸。

如果未设置，则任何样式的颜色都将为白色。

子节点

<amp-story-audio-sticker-pretap> 可选

用户点击之前显示的贴纸。采用任何可以渲染为贴纸的 HTML 代码，例如 <amp-img>、<svg>、带有 CSS 动画的常规元素等。

<amp-story-audio-sticker-posttap> 可选

用户点击之后显示的贴纸。采用任何可以渲染为贴纸的 HTML 代码，例如 <amp-img>、<svg>、带有 CSS 动画的常规元素等。

示例：预制贴纸

<amp-story-grid-layer>
  <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
</amp-story-grid-layer>

示例：自定义贴纸

<amp-story-grid-layer>
  <amp-story-audio-sticker size="large" sticker-style="dropshadow">
    <amp-story-audio-sticker-pretap>
      <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
    </amp-story-audio-sticker-pretap>
    <amp-story-audio-sticker-posttap>
      <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
    </amp-story-audio-sticker-posttap>
  </amp-story-audio-sticker>
</amp-story-grid-layer>