AMP

Important: this documentation is not applicable to your currently selected format websites!

amp-story-audio-sticker

Description

A sticker for users to click and unmute the story.

 

Required Scripts

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

Supported Layouts

Summary

An audio sticker component for publishers to put anywhere on their story for users to click to unmute the story.

Developers can choose to either choose one of the 4 default stickers or provide custom stickers. The sticker should be put inside an <amp-story-grid-layer>.

Attributes

size {string} optional

Size of the sticker. Accepted values:

  • "large": 180 x 180 px
  • "small": 120 x 120 px

Default value: "small", which would be used if the input value is invalid or is not provided.

sticker {string} optional

Default value: "headphone-cat", which would be used if the input value is invalid or is not provided.

A list of premade stickers to use:

Accepted Value Pre-tap Image Post-tap Image
"headphone-cat" Cat Pre-tap Cat Post-tap
"tape-player" Player Pre-tap Player Post-tap
"loud-speaker" Speaker Pre-tap Speaker Post-tap
"audio-cloud" Cloud Pre-tap Cloud Post-tap

sticker-style {string} optional

Default value: none

Extra premade styles of the sticker to use:

Accepted Value Description Header 3
"outline" Adds a border around the provided sticker image. Image 2
"dropshadow" Adds a dropshadow around the opaque part of the provided sticker image. Image 4

Customize Sticker Style via CSS Variables

  • --story-audio-sticker-outline-color: Color of the sticker outline.
  • --story-audio-sticker-dropshadow-color: Color of the sticker drop shadow.

If the CSS variables are set on story level, the color would be applied to all stickers in the story. If the CSS variables are set on story page or sticker level, it would only be applied to the sticker on specific story page or the specific sticker.

If not set, the color of either style would be white.

Children Nodes

<amp-story-audio-sticker-pretap> optional

Sticker shown before a user tap. Takes any html code that can be rendered as a sticker, e.g. <amp-img>, <svg>, general elements with CSS animation, etc.

<amp-story-audio-sticker-posttap> optional

Sticker shown after a user tap. Takes any html code that can be rendered as a sticker, e.g. <amp-img>, <svg>, general elements with CSS animation, etc.

Example: Premade Stickers

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

Example: Custom Stickers

<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>
Bạn cần được trợ giúp thêm?

Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.

Truy cập Stack Overflow
Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Truy cập GitHub