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 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>

在有效的 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 進行清除浮動，因此無法有捲軸。
• <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 屬性。