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>
هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub