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>