amp-accordion
簡介
手風琴提供檢視者概覽內容大綱並隨意跳至選擇章節的方式。
設定
匯入 amp-accordion 元件。
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
基本用法
amp-accordion 由多個 section 組成。每個 <section> 必須有兩個直接子項。第一個子項將被視為章節的標題。點擊/輕觸此章節將觸發展開/摺疊行為。使用 disable-session-states 屬性來停用跨工作階段保留手風琴狀態。
章節 1
大量精采內容。
章節 2
<div> 中。章節 3
<amp-accordion class="sample">
<section expanded>
<h4>Section 1</h4>
<p>Bunch of awesome content.</p>
</section>
<section>
<h4>Section 2</h4>
<div>Bunch of even more awesome content. This time in a <code><div></code>.</div>
</section>
<section>
<h4>Section 3</h4>
<figure>
<amp-img src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
<figcaption>Images work as well.</figcaption>
</figure>
</section>
</amp-accordion>
自訂樣式
amp-accordion 將 expanded 屬性新增至任何展開的元素。您可以使用 CSS 屬性選取器，根據手風琴章節是否展開或摺疊來設定樣式。使用 section[expanded] 為展開狀態設定樣式，並使用 section:not([expanded]) 為摺疊狀態設定樣式。
amp-accordion section[expanded] .show-more { display: none; } amp-accordion section:not([expanded]) .show-less { display: none; }
此範例顯示依據章節是否展開而顯示不同的標題。
顯示更多 顯示較少
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
<amp-accordion class="sample" disable-session-states>
<section>
<h4><span class="show-more">Show more</span> <span class="show-less">Show less</span></h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
</amp-accordion>
隱藏標題
此範例會在點擊「顯示更多」按鈕後隱藏該按鈕。
<amp-accordion class="sample hidden-header" disable-session-states>
<section>
<h4><span class="show-more">Show more</span></h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
</amp-accordion>
巢狀手風琴
您甚至可以巢狀多個手風琴。只需確保避免根據封閉 amp-accordion 的展開狀態設定元素樣式。尤其應避免過於通用的規則，例如
section[expanded] h4 { ... }
而是直接鎖定元素
section[expanded] > h4 { ... }
章節 1
大量內容。
章節 2
巢狀章節 2.1
大量內容。
巢狀章節 2.2
更多內容。
<amp-accordion class="sample" disable-session-states>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
</amp-accordion>
自動摺疊手風琴
expand-single-section 屬性會強制手風琴在任何給定時間僅允許一個展開的章節。展開一個章節將導致任何其他開啟的章節關閉。
章節 1
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
章節 2
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
章節 3
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
<amp-accordion class="sample" expand-single-section>
<section>
<h4>Section 1</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
<section>
<h4>Section 2</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
<section>
<h4>Section 3</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
</amp-accordion>
動畫手風琴
animate 屬性會為手風琴章節的展開和摺疊加入動畫效果。
章節 1
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
章節 2
章節 3
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.
<amp-accordion class="sample" animate>
<section>
<h4>Section 1</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
<section>
<h4>Section 2</h4>
<amp-img src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
</section>
<section>
<h4>Section 3</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
odio arcu in eu wisi. </p>
</section>
</amp-accordion>
比較手風琴
這使用動態資料實作比較/對比手風琴檢視畫面。
在這裡，我們使用 CSS 並排顯示元件。display: flex 和 width: 50% 欄位可讓我們並排檢視內容。我們在最後一個類別中修改 border 和 padding，以在手風琴中清楚定義 2 個並排的比較方塊。
#content-head { display: flex; } .fruit-title { width: 50%; } .comp-data { display: flex; } .comp-value { width: 50%; border: 1px solid; padding: 5px 18px; display: flex; }
{{primaryFruit.subType}} {{primaryFruit.fruit}}
{{subType}} {{fruit}}
{{headingName}}
{{rowLabel}}
<amp-list src="/static/samples/json/accordion-fruit.json" height="170" width="auto" layout="fixed-height" items="." single-item id="fruitList">
<template type="amp-mustache">
<div id="content-head">
<div class="fruit-title">
<p>
{{primaryFruit.subType}} {{primaryFruit.fruit}}
</p>
<amp-img src="{{primaryFruit.imageURL}}" width="50" height="50"></amp-img>
</div>
<div class="fruit-title">
{{#competitorFruit}}
<p>
{{subType}} {{fruit}}
</p>
<amp-img src="{{imageURL}}" width="50" height="50"></amp-img>
{{/competitorFruit}}
</div>
</div>
<section>
<amp-accordion animate disable-session-states expand-single-section on="expand:fruitList.changeToLayoutContainer;collapse:fruitList.changeToLayoutContainer">
{{#comparisonData}}{{#heading}}
<section [class]="'{{headingName}}'.split(' ')[0]">
<h4>{{headingName}}</h4>
<div>
{{#rowAndSubHeading}}
<h3>{{rowLabel}}</h3>
<div class="comp-data">
{{#fruitData}}
<div class="comp-value">
{{colData}}
</div>
{{/fruitData}}
</div>
{{/rowAndSubHeading}}
</div>
</section>
{{/heading}}{{/comparisonData}}
</amp-accordion>
</section>
</template>
</amp-list>
如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 無法解釋的功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。
在 GitHub 上編輯範例-