AMP-Selectorを使ってタブメニューを実装する方法

AMPコンポーネントのamp-selectorを利用してタブメニューでの表示切り替えを実装するサンプルコードです
See the Pen AMP-Selector by yochans (@yochans) on CodePen.
amp-selectorを読み込む
amp-selectorを利用するにはAMPコンポーネントのamp-selector-0.1.jsを読み込む必要があります
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
AMP-Selectorを使ったタブメニューのサンプルコード
AMP-Selectorを使ってタブメニューでの切り替え表示を実装するサンプルコードです
HTML
<amp-selector class="tabs" role="tablist"> <div id="tab1" role="tab" aria-controls="tabpanel1" option selected>TAB1</div> <div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">TAB1表示エリア</div> <div id="tab2" role="tab" aria-controls="tabpanel2" option>TAB2</div> <div id="tabpanel2" role="tabpanel" aria-labelledby="tab2">TAB2表示エリア</div> <div id="tab2" role="tab" aria-controls="tabpanel3" option>TAB3</div> <div id="tabpanel3" role="tabpanel" aria-labelledby="tab3">TAB3表示エリア</div> </amp-selector>
CSS
/*全体*/ amp-selector[role=tablist].tabs { display: flex; flex-wrap: wrap; } /*タブボタン*/ amp-selector[role=tablist].tabs [role=tab] { flex-grow: 1; text-align: center; font-weight: bold; color:#808080; } /*タブボタン選択中*/ amp-selector[role=tablist].tabs [role=tab][selected] { outline: none; color:#00bfff; } /*表示エリア*/ amp-selector[role=tablist].tabs [role=tabpanel] { background:#87cefa; color:#808080; padding:1rem; height:200px; display: none; width: 100%; order: 1; } /*表示エリア選択中*/ amp-selector[role=tablist].tabs [role=tab][selected] + [role=tabpanel] { display: block; }
ディスカッション
コメント一覧
まだ、コメントがありません