搭配 amp-selector 的分頁面板

簡介

這是分頁面板的實作範例，使用 amp-selector。分頁和分頁面板透過 flexbox 定位，而 amp-selector 使用 selected 屬性來顯示/隱藏正確的分頁面板，並設定所選分頁的樣式。

設定

在標頭中匯入 amp-selector 元件，我們將使用它來實作分頁切換。

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

只需要一點 CSS。

<style amp-custom>
    :root {
      --color-primary: #005AF0;
      --space-1: .5rem;  /* 8px */
      --space-4: 2rem;   /* 32px */
    }

    /* Styles for the flex layout based tabs */
    amp-selector[role=tablist].tabs-with-flex {
        display: flex;
        flex-wrap: wrap;
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab] {
        flex-grow: 1;
        /* custom styling, feel free to change */
        text-align: center;
        padding: var(--space-1);
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab][selected] {
        outline: none;
        /* custom styling, feel free to change */
        border-bottom: 2px solid var(--color-primary);
    }
    amp-selector[role=tablist].tabs-with-flex [role=tabpanel] {
        display: none;
        width: 100%;
        order: 1; /* must be greater than the order of the tab buttons to flex to the next line */
        /* custom styling, feel free to change */
        padding: var(--space-4);
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab][selected] + [role=tabpanel] {
        display: block;
    }

    /* Styles for the selector based tabs */
    amp-selector[role=tablist].tabs-with-selector {
        display: flex;
    }
    amp-selector[role=tablist].tabs-with-selector [role=tab][selected] {
        outline: none;
        /* custom styling, feel free to change */
        border-bottom: 2px solid var(--color-primary);
    }
    amp-selector[role=tablist].tabs-with-selector {
        display: flex;
    }
    amp-selector[role=tablist].tabs-with-selector [role=tab] {
      /* custom styling, feel free to change */
      width: 100%;
      text-align: center;
      padding: var(--space-1);
    }
    amp-selector.tabpanels [role=tabpanel] {
      display: none;
      /* custom styling, feel free to change */
      padding: var(--space-4);
    }
    amp-selector.tabpanels [role=tabpanel][selected] {
      outline: none;
      display: block;
    }

</style>

使用彈性版面配置的簡易分頁

這是包含三個面板的最基本範例。每個 tabpanel 都定義在其 tab 下方，且預設為隱藏。只有在選取 tab 時，tabpanel 才會透過下列 CSS 規則設定為可見

amp-selector[role=tablist] [role=tab][selected] + [role=tabpanel] {
  display: block;
}

分頁內容使用彈性版面配置定位在分頁按鈕下方。

分頁一

分頁一內容...

分頁二

分頁二內容...

分頁三

分頁三內容...

<amp-selector class="tabs-with-flex" role="tablist" keyboard-select-mode="focus">
  <div id="tab1" role="tab" aria-controls="tabpanel1" option selected>Tab one</div>
  <div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">Tab one content... </div>
  <div id="tab2" role="tab" aria-controls="tabpanel2" option>Tab two</div>
  <div id="tabpanel2" role="tabpanel" aria-labelledby="tab2">Tab two content... </div>
  <div id="tab3" role="tab" aria-controls="tabpanel3" option>Tab three</div>
  <div id="tabpanel3" role="tabpanel" aria-labelledby="tab3">Tab three content... </div>
</amp-selector>

透過按鈕選取分頁

我們可以利用 amp-selector 的 toggle 動作來啟動特定分頁：on="tap:myTabs.toggle(index=0, value=true)"。

分頁一

分頁一內容...

分頁二

分頁二內容...

分頁三

分頁三內容...

<button on="tap:myTabs.toggle(index=0, value=true)">Select tab 1</button>
<button on="tap:myTabs.toggle(index=1, value=true)">Select tab 2</button>
<button on="tap:myTabs.toggle(index=2, value=true)">Select tab 3</button>

<amp-selector id="myTabs" class="tabs-with-flex" role="tablist" keyboard-select-mode="focus">
  <div id="sample2-tab1" role="tab" aria-controls="sample2-tabpanel1" option selected>Tab one</div>
  <div id="sample2-tabpanel1" role="tabpanel" aria-labelledby="sample2-tab1">Tab one content... </div>
  <div id="sample2-tab2" role="tab" aria-controls="sample2-tabpanel2" option>Tab two</div>
  <div id="sample2-tabpanel2" role="tabpanel" aria-labelledby="sample2-tab2">Tab two content... </div>
  <div id="sample2-tab3" role="tab" aria-controls="sample2-tabpanel3" option>Tab three</div>
  <div id="sample2-tabpanel3" role="tabpanel" aria-labelledby="sample2-tab3">Tab three content... </div>
</amp-selector>

使用兩個 amp-selector 的更彈性分頁版面配置

如果基於任何原因，以彈性版面配置為基礎的方法不可行，則可以使用兩個不同的 amp-selector 來實作分頁和分頁面板。

分頁一

分頁二

分頁三

分頁一內容...

分頁二內容...

分頁三內容...

<amp-selector class="tabs-with-selector" role="tablist" on="select:myTabPanels.toggle(index=event.targetOption, value=true)" keyboard-select-mode="focus">
  <div id="sample3-tab1" role="tab" aria-controls="sample3-tabpanel1" option="0" selected>Tab one</div>
  <div id="sample3-tab2" role="tab" aria-controls="sample3-tabpanel2" option="1">Tab two</div>
  <div id="sample3-tab3" role="tab" aria-controls="sample3-tabpanel3" option="2">Tab three</div>
</amp-selector>

<amp-selector id="myTabPanels" class="tabpanels">
  <div id="sample3-tabpanel1" role="tabpanel" aria-labelledby="sample3-tab1" option selected>Tab one content... </div>
  <div id="sample3-tabpanel2" role="tabpanel" aria-labelledby="sample3-tab2" option>Tab two content... </div>
  <div id="sample3-tabpanel3" role="tabpanel" aria-labelledby="sample3-tab3" option>Tab three content... </div>
</amp-selector>

需要進一步說明嗎？

如果本頁的說明未涵蓋您的所有問題，歡迎聯絡其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者： @tcorley