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

2019-02-122020-01-05AMP コンポーネント,AMP

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

参考：Tab Panels with amp-selector｜AMP by Example