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>