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 屬性 以取得更多資訊。