摘要
属性
子节点
- <amp-story-audio-sticker-pretap> 可选
- <amp-story-audio-sticker-posttap> 可选
示例：预制贴纸
示例：自定义贴纸

重要提示：此文档不适用于您当前选择的格式 ads！

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` {字符串} 可选

贴纸的大小。接受的值

“大”：180 x 180 像素
“小”：120 x 120 像素

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

`sticker` {字符串} 可选

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

要使用的预制贴纸列表

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

`sticker-style` {字符串} 可选

默认值：无

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

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

通过 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>

需要更多帮助？

您已经阅读本文档很多次，但它并没有真正涵盖您的所有问题？也许其他人也有同感：请在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您为自己特别热衷的问题做出一次性贡献。

转到 GitHub

amp-story-audio-sticker

描述

必需的脚本

支持的布局

摘要

属性

size {字符串} 可选

sticker {字符串} 可选

sticker-style {字符串} 可选