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>