範例：<amp-lightbox> - amp.dev

amp-lightbox
- 簡介設定基本用法與 amp-bind 結合

網站

簡介

amp-lightbox 元件允許「燈箱」或類似體驗 - 在使用者互動時，元件會展開以填滿整個視窗，直到使用者再次關閉。

設定

在標頭中匯入 amp-lightbox 元件

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

您可以將燈箱元件與 amp-bind 結合使用。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

基本用法

amp-lightbox 元件定義將在全視窗覆蓋層中顯示的子元素。若要透過點擊或輕觸關閉燈箱，請在燈箱內的一個或多個元素上使用 on 屬性。在此範例中，使用者可以點擊燈箱中的任何位置來關閉它。

當使用者輕觸或點擊具有 on 屬性的元素時，燈箱會顯示，該屬性會指向 amp-lightbox 元素的 ID。

<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
    <h1>Hello World!</h1>
  </div>
</amp-lightbox>
<button on="tap:my-lightbox">
  Open lightbox
</button>

為了在燈箱中顯示圖片，AMP 還提供 amp-image-lightbox 元件，該元件不需要重複指定圖片。

與 amp-bind 結合

amp-lightbox 可以透過將布林值繫結到 open 屬性，作為 amp-bind 評估的結果開啟。請注意，我們也正在監聽 lightboxClose 事件以重設變數的狀態。

<amp-lightbox id="my-bindable-lightbox" [open]="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
  <div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
    <h1>Hello World!</h1>
  </div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">
  Open lightbox
</button>

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未解釋的功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫