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 {字串} (選填)

貼圖尺寸。接受的值

• "large"：180 x 180 像素
• "small"：120 x 120 像素

預設值：「small」，如果輸入值無效或未提供，則會使用此值。

sticker {字串} (選填)

預設值：「headphone-cat」，如果輸入值無效或未提供，則會使用此值。

可使用的預製貼圖清單

接受的值	點擊前圖片	點擊後圖片
"headphone-cat"
"tape-player"
"loud-speaker"
"audio-cloud"

sticker-style {字串} (選填)

預設值：無

可使用的額外預製貼圖樣式

接受的值	描述	標題 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>