amp-accordion

1.0 0.1

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

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">

提供檢視者概覽內容大綱並跳至任何區段的方式。這對於行動裝置非常有用，即使區段只有幾句話，也需要捲動。

用法

amp-accordion 元件可讓您顯示可摺疊和展開的內容區段。此元件提供檢視者概覽內容大綱並跳至任何區段的方式。有效使用可減少行動裝置上的捲動需求。

• amp-accordion 接受一個或多個 <section> 元素作為其直接子元素。
• 每個 <section> 必須正好包含兩個直接子元素。
• <section> 中的第一個子元素是 amp-accordion 該區段的標題。它必須是標題元素，例如 <h1>-<h6> 或 <header>。
• <section> 中的第二個子元素是可展開/摺疊的內容。它可以是 AMP HTML 中允許的任何標籤。
• 點擊或輕觸 <section> 標題會展開或摺疊該區段。
• 具有定義 id 的 amp-accordion 會在使用者停留在您的網域時，保留每個區段的摺疊或展開狀態。

範例

以下範例包含具有三個區段的 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>

在有效的 AMP 文件之外獨立使用

Bento 允許您在非 AMP 頁面中使用 AMP 元件，而無需完全採用有效的 AMP。您可以取得這些元件並將它們放置在不支援 AMP 的框架和 CMS 的實作中。在我們的指南 在非 AMP 頁面中使用 AMP 元件 中閱讀更多資訊。

若要尋找 amp-accordion 的獨立版本，請參閱 bento-accordion。

屬性

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>

expanded (已展開)

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

使用 amp-bind 將 [expanded] 屬性繫結，以程式化方式展開或摺疊 <section> 元素。當運算式評估為 false 時，展開的區段會摺疊。如果運算式評估為 false 以外的任何值，則摺疊的區段會展開。

<amp-accordion>
  <section
    [expanded]="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 expanded>
    <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>

expand-single-section (展開單一區段)

透過將 expand-single-section 屬性套用至 <amp-accordion> 元素，一次只允許展開一個區段。這表示如果使用者輕觸摺疊的 <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>

樣式設定

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 區段的內容元素。

版本注意事項

實驗性 1.0 版本的 amp-accordion 不支援工作階段狀態。它的行為就像始終套用 disable-session-states 屬性一樣。

版本 0.1 和 1.0 與 amp-bind 相容，但某些繫結語法不同。您可以在版本 1.0 中直接使用 expanded 屬性進行繫結。版本 1.0 中不支援 data-expand 繫結。請參閱 expanded 屬性 以取得更多資訊。