搭配 amp-selector 的頁籤面板

簡介

這是一個使用 <a href="/documentation/components/amp-selector/"><code>amp-selector</code></a> 實作頁籤面板的範例。頁籤和頁籤面板透過 <code>flexbox</code> 定位，而 <code>amp-selector</code> 使用 <code>selected</code> 屬性來顯示/隱藏正確的頁籤面板並設定所選頁籤的樣式。

設定

在標頭中匯入 <code>amp-selector</code> 元件，我們將使用它來實作頁籤切換功能。

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

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

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

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>

透過按鈕選取頁籤

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

頁籤一

頁籤一內容...

頁籤二

頁籤二內容...

頁籤三

頁籤三內容...

<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 實現更彈性的頁籤版面配置

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

頁籤一

頁籤二

頁籤三

頁籤一內容...

頁籤二內容...

頁籤三內容...

<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 撰寫