AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-accordion

 
您現在可以在有效的 AMP 文件之外使用此元件，方法是使用此元件的 Bento 版本。請參閱 Bento 指南以瞭解詳情。

說明

堆疊的標題列表，使用者互動時會收合或展開內容區塊。

 

必要指令碼

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

支援的版面配置

提供檢視者快速瀏覽內容大綱並跳至任何區塊的方式。這對行動裝置很有幫助，因為即使是區塊中的幾句話也需要捲動。

用法

amp-accordion 元件可讓您顯示可收合和展開的內容區塊。這個元件提供檢視者快速瀏覽內容大綱並跳至任何區塊的方式。有效使用可減少行動裝置上的捲動需求。

  • amp-accordion 接受一或多個 <section> 元素做為其直接子項。
  • 每個 <section> 都必須正好包含兩個直接子項。
  • <section> 中的第一個子項是 amp-accordion 該區塊的標題。它必須是標題元素，例如 <h1>-<h6> 或 <header>。
  • <section> 中的第二個子項是可展開/收合的內容。它可以是 AMP for Email 中允許的任何標記。
  • 按一下或輕觸 <section> 標題會展開或收合區塊。

範例

以下範例包含具有三個區塊的 amp-accordion。第三個區塊上的 expanded 屬性會在頁面載入時展開該區塊。

 
<amp-accordion id="my-accordion" disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
在 playground 中開啟此程式碼片段

屬性

animate

在 <amp-accordion> 中加入 animate 屬性，即可在內容展開時加入「向下捲動」動畫，並在收合時加入「向上捲動」動畫。

 
<amp-accordion animate>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>
在 playground 中開啟此程式碼片段

expanded

將 expanded 屬性套用至巢狀 <section>，即可在頁面載入時展開該區塊。

expand-single-section

將 expand-single-section 屬性套用至 amp-accordion，即可指定一次只能展開一個 <section>。如果使用者按一下或輕觸已收合的 <section>，則任何目前已展開的 <section> 都會收合。

 
<amp-accordion expand-single-section>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>
在 playground 中開啟此程式碼片段

[data-expand]

將 [data-expand] 屬性繫結至 <section>，即可展開或收合該區塊。如果運算式評估為 false，則已展開的區塊會收合。如果運算式評估為 false 以外的任何值，則已收合的區塊會展開。

 
<amp-accordion>
  <section
    [data-expand]="sectionOne"
    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
  >
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
在 playground 中開啟此程式碼片段

活動

當點擊或輕觸 accordion 區塊時，以下 amp-accordion 事件會觸發。

expand

expand 事件會觸發目標 amp-accordion 區塊從收合狀態變更為展開狀態。在已展開的區塊上呼叫 expand 會觸發 expand 事件。

 
<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 playground 中開啟此程式碼片段

collapse

collapse 事件會觸發目標 amp-accordion 區塊從展開狀態變更為收合狀態。在已收合的區塊上呼叫 collapse 會觸發事件。

 
<amp-accordion id="myAccordion">
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
    <h2>Section 2</h2>
    <div>Closing me will close Section 1</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 playground 中開啟此程式碼片段

樣式設定

amp-accordion 元素選取器會根據您的規格設定 amp-accordion 的樣式。以下範例會將背景顏色變更為綠色

amp-accordion {
  background-color: green;
}

設定 amp-accordion 樣式時，請記住以下幾點

  • amp-accordion 元素一律為 display: block。
  • float 無法設定 <section>、標題或內容元素的樣式。
  • 展開的區塊會將 expanded 屬性套用至 <section> 元素。
  • 內容元素已透過 overflow: hidden 進行 clear-fix，因此無法有捲軸。
  • <amp-accordion>、<section>、標題和內容元素的邊界都設定為 0，但可以在自訂樣式中覆寫。
  • 標題和內容元素都是 position: relative。

無障礙功能

amp-accordion 會自動加入以下 ARIA 屬性

  • aria-controls：套用至每個 amp-accordion 區塊的標題元素。
  • aria-expanded (狀態)：套用至每個 amp-accordion 區塊的標題元素。
  • aria-labelledby：套用至每個 amp-accordion 區塊的內容元素。

amp-accordion 也會自動加入以下無障礙功能屬性

  • tabindex：套用至每個 amp-accordion 區塊的標題元素。
  • role=button：套用至每個 amp-accordion 區塊的標題元素。
  • role=region：套用至每個 amp-accordion 區塊的內容元素。

驗證

請參閱 AMP 驗證器規格中的 amp-accordion 規則。

需要更多協助嗎？

您已閱讀本文件十幾次，但它似乎沒有涵蓋您的所有問題？或許其他人也有相同感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性的貢獻。

前往 GitHub