amp-accordion
アコーディオンです。べろべろ~んってリストが出て来る奴です。
プラグインの読み込み
amp-accordionを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<amp-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="images/squirrel.jpg" width="320" height="256"></amp-img> </section> </amp-accordion>
ルールとしては、親要素がamp-accordionなのはともかく
それの直下の子要素は必ずsectionにする必要があります。
で、sectionの子要素の最初は、見出しやらheadreタグを必ず指定します。
これだけしっかり守っていきましょう。
動作デモ
各種プロパティについて
数は多くないですが、プロパティについてまとめます。
disable-session-states |
親要素のamp-accordionタグにつけれるプロパティです。 このプロパティが設定されている場合は 【折りたたみ/展開状態はセッションレベルで保持されず】 設定無い場合は 【折りたたみ/展開状態はセッションレベルで保持される】 となります。 何言ってんだって感じですが、分かりやすく言うと このプロパティが設定されている場合は 【リロードとか他画面遷移して戻ってきても必ず初期表示となる】 設定無い場合は 【リロードとか他画面遷移して戻ってきても必ず最終表示形式となる(どこか展開してたら展開した状態で表示される)】 って事になります。地味ですがありがたい感じがしますね。 |
---|---|
expanded |
アコーディオン要素をデフォルトで展開状態にします。 ちなみに手動で展開した場合もこのプロパティが付与されます。 |
ちなみに、JSで作るアコーディオンみたくびろーんと広がる動作はないようです。
装飾/スタイリングについて
装飾に関して以下のルールがあります。
- amp-accordion要素セレクタを使用して自由にスタイルを設定できます。
- amp-accordion要素は常にdisplay: blockです。
- floatは使ったらだめ
- アコーディオン展開時には、sectionタグにexpandedプロパティが付与されます。
- アコーディオン内のコンテンツは、高さが固定され、overflow: hiddenが付与されているので、スクロールバーを設定できません。めっちゃ長くすると画面外まで伸びます。
- マージンはamp-accordionタグsectionタグ、見出し、およびコンテンツ要素で0になってます。ほしければ自分でつけてね。
- ヘッダ要素とコンテンツ要素に関してはposition: relativeになってます。