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

使用 flex 布局的简单选项卡

这是包含三个面板的最基本示例。每个 tabpanel 都定义在其 tab 下方，并且默认情况下处于隐藏状态。只有当 tab 被选中时，tabpanel 才通过以下 CSS 规则设置为可见

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

使用 flex 布局将标签内容定位在标签按钮下方。

标签一

标签一内容...

标签二

标签二内容...

标签三

标签三内容...

<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 的更灵活的选项卡布局

如果出于任何原因，基于 flex 布局的方法不可行，则可以使用两个不同的 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 撰写