HowTo 组件 – howto-tabs
通过集合保持井井有条根据您的偏好保存内容并进行分类。

Ewa Gasperowicz

Rob Dodson

Surma

摘要

<howto-tabs> 通过将可见内容分隔到多个面板中来限制可见内容。一次仅显示一个面板，而所有相应的标签页始终可见。要从一个面板切换到另一个面板，必须选择相应的标签页。

用户可以通过单击或使用箭头键来更改活动标签页的选择。

如果 JavaScript 被禁用，则所有面板都会与各自的标签页交错显示。这些标签页现在充当标题。

参考

演示

在 GitHub 上查看实时演示

用法示例

<style>
  howto-tab {
    border: 1px solid black;
    padding: 20px;
  }
  howto-panel {
    padding: 20px;
    background-color: lightgray;
  }
  howto-tab[selected] {
    background-color: bisque;
  }

如果 JavaScript 未运行，则元素将不匹配 :defined。在这种情况下，此样式会在标签页和上一个面板之间添加间距。

  howto-tabs:not(:defined), howto-tab:not(:defined), howto-panel:not(:defined) {
    display: block;
  }
</style>

<howto-tabs>
  <howto-tab role="heading" slot="tab">Tab 1</howto-tab>
  <howto-panel role="region" slot="panel">Content 1</howto-panel>
  <howto-tab role="heading" slot="tab">Tab 2</howto-tab>
  <howto-panel role="region" slot="panel">Content 2</howto-panel>
  <howto-tab role="heading" slot="tab">Tab 3</howto-tab>
  <howto-panel role="region" slot="panel">Content 3</howto-panel>
</howto-tabs>

代码

(function() {

定义键代码以帮助处理键盘事件。

  const KEYCODE = {
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
    UP: 38,
    HOME: 36,
    END: 35,
  };

为了避免为每个新实例使用 .innerHTML 调用解析器，所有 <howto-tabs> 实例共享阴影 DOM 内容的模板。

  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      :host {
        display: flex;
        flex-wrap: wrap;
      }
      ::slotted(howto-panel) {
        flex-basis: 100%;
      }
    </style>
    <slot name="tab"></slot>
    <slot name="panel"></slot>
  `;

HowtoTabs 是标签页和面板的容器元素。

<howto-tabs> 的所有子元素都应该是 <howto-tab> 或 <howto-tabpanel>。此元素是无状态的，这意味着不缓存任何值，因此运行时更改有效。

  class HowtoTabs extends HTMLElement {
    constructor() {
      super();

如果未附加到此元素的事件处理程序需要访问 this，则需要绑定它们。

      this._onSlotChange = this._onSlotChange.bind(this);

为了逐步增强，标记应在标签页和面板之间交替。重新排序其子元素的元素往往与框架配合不佳。相反，阴影 DOM 用于通过使用插槽来重新排序元素。

      this.attachShadow({ mode: 'open' });

导入共享模板以创建标签页和面板的插槽。

      this.shadowRoot.appendChild(template.content.cloneNode(true));

      this._tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
      this._panelSlot = this.shadowRoot.querySelector('slot[name=panel]');

此元素需要对新子元素做出反应，因为它使用 aria-labelledby 和 aria-controls 在语义上链接标签页和面板。新子元素将自动插入插槽并导致 slotchange 触发，因此不需要 MutationObserver。

      this._tabSlot.addEventListener('slotchange', this._onSlotChange);
      this._panelSlot.addEventListener('slotchange', this._onSlotChange);
    }

connectedCallback() 通过重新排序对标签页和面板进行分组，并确保只有一个标签页处于活动状态。

    connectedCallback() {

该元素需要执行一些手动输入事件处理，以允许使用箭头键和 Home / End 进行切换。

      this.addEventListener('keydown', this._onKeyDown);
      this.addEventListener('click', this._onClick);

      if (!this.hasAttribute('role'))
        this.setAttribute('role', 'tablist');

直到最近，当元素被解析器升级时，slotchange 事件才触发。因此，该元素手动调用处理程序。一旦新行为在所有浏览器中落地，就可以删除下面的代码。

      Promise.all([
        customElements.whenDefined('howto-tab'),
        customElements.whenDefined('howto-panel'),
      ])
        .then(() => this._linkPanels());
    }

disconnectedCallback() 删除 connectedCallback() 添加的事件侦听器。

    disconnectedCallback() {
      this.removeEventListener('keydown', this._onKeyDown);
      this.removeEventListener('click', this._onClick);
    }

_onSlotChange() 在每次从阴影 DOM 插槽之一添加或删除元素时调用。

    _onSlotChange() {
      this._linkPanels();
    }

_linkPanels() 使用 aria-controls 和 aria-labelledby 将标签页与其相邻面板链接起来。此外，该方法确保只有一个标签页处于活动状态。

    _linkPanels() {
      const tabs = this._allTabs();

为每个面板提供一个 aria-labelledby 属性，该属性引用控制它的标签页。

      tabs.forEach((tab) => {
        const panel = tab.nextElementSibling;
        if (panel.tagName.toLowerCase() !== 'howto-panel') {
          console.error(`Tab #${tab.id} is not a` +
            `sibling of a <howto-panel>`);
          return;
        }

        tab.setAttribute('aria-controls', panel.id);
        panel.setAttribute('aria-labelledby', tab.id);
      });

该元素检查是否已将任何标签页标记为已选中。如果未选中，则现在选择第一个标签页。

      const selectedTab =
        tabs.find((tab) => tab.selected) || tabs[0];

接下来，切换到选定的标签页。_selectTab() 负责将所有其他标签页标记为未选中并隐藏所有其他面板。

      this._selectTab(selectedTab);
    }

_allPanels() 返回标签页面板中的所有面板。如果 DOM 查询成为性能问题，此函数可以记住结果。记忆的缺点是，动态添加的标签页和面板将无法处理。

这是一个方法而不是 getter，因为 getter 意味着读取它是廉价的。

    _allPanels() {
      return Array.from(this.querySelectorAll('howto-panel'));
    }

_allTabs() 返回标签页面板中的所有标签页。

    _allTabs() {
      return Array.from(this.querySelectorAll('howto-tab'));
    }

_panelForTab() 返回给定标签页控制的面板。

    _panelForTab(tab) {
      const panelId = tab.getAttribute('aria-controls');
      return this.querySelector(`#${panelId}`);
    }

_prevTab() 返回当前选定的标签页之前的标签页，在到达第一个标签页时环绕。

    _prevTab() {
      const tabs = this._allTabs();

使用 findIndex() 查找当前选定元素的索引，然后减去 1 以获得前一个元素的索引。

      let newIdx = tabs.findIndex((tab) => tab.selected) - 1;

添加 tabs.length 以确保索引为正数，并获得模数以在必要时环绕。

      return tabs[(newIdx + tabs.length) % tabs.length];
    }

_firstTab() 返回第一个标签页。

    _firstTab() {
      const tabs = this._allTabs();
      return tabs[0];
    }

_lastTab() 返回最后一个标签页。

    _lastTab() {
      const tabs = this._allTabs();
      return tabs[tabs.length - 1];
    }

_nextTab() 获取当前选定的标签页之后的标签页，在到达最后一个标签页时环绕。

    _nextTab() {
      const tabs = this._allTabs();
      let newIdx = tabs.findIndex((tab) => tab.selected) + 1;
      return tabs[newIdx % tabs.length];
    }

reset() 将所有标签页标记为未选中并隐藏所有面板。

    reset() {
      const tabs = this._allTabs();
      const panels = this._allPanels();

      tabs.forEach((tab) => tab.selected = false);
      panels.forEach((panel) => panel.hidden = true);
    }

_selectTab() 将给定的标签页标记为已选中。此外，它会取消隐藏与给定标签页对应的面板。

    _selectTab(newTab) {

取消选择所有标签页并隐藏所有面板。

      this.reset();

获取与 newTab 关联的面板。

      const newPanel = this._panelForTab(newTab);

如果该面板不存在，则中止。

      if (!newPanel)
        throw new Error(`No panel with id ${newPanelId}`);
      newTab.selected = true;
      newPanel.hidden = false;
      newTab.focus();
    }

_onKeyDown() 处理标签页面板内的按键。

    _onKeyDown(event) {

如果按键并非源自标签页元素本身，则它是面板内或空白区域内的按键。无需执行任何操作。

      if (event.target.getAttribute('role') !== 'tab')
        return;

不要处理辅助技术常用的修饰键快捷键。

      if (event.altKey)
        return;

switch-case 将确定应将哪个标签页标记为活动状态，具体取决于按下的键。

      let newTab;
      switch (event.keyCode) {
        case KEYCODE.LEFT:
        case KEYCODE.UP:
          newTab = this._prevTab();
          break;

        case KEYCODE.RIGHT:
        case KEYCODE.DOWN:
          newTab = this._nextTab();
          break;

        case KEYCODE.HOME:
          newTab = this._firstTab();
          break;

        case KEYCODE.END:
          newTab = this._lastTab();
          break;

任何其他按键都会被忽略并传递回浏览器。

        default:
          return;
      }

浏览器可能具有绑定到箭头键、Home 键或 End 键的一些本机功能。该元素调用 preventDefault() 以阻止浏览器执行任何操作。

      event.preventDefault();

选择已在 switch-case 中确定的新标签页。

      this._selectTab(newTab);
    }

_onClick() 处理标签页面板内的点击。

    _onClick(event) {

如果点击并非以标签页元素本身为目标，则它是面板内或空白区域内的点击。无需执行任何操作。

      if (event.target.getAttribute('role') !== 'tab')
        return;

但是，如果它位于标签页元素上，则选择该标签页。

      this._selectTab(event.target);
    }
  }

  customElements.define('howto-tabs', HowtoTabs);

howtoTabCounter 计算创建的 <howto-tab> 实例的数量。该数字用于生成新的唯一 ID。

  let howtoTabCounter = 0;

HowtoTab 是 <howto-tabs> 标签页面板的标签页。 <howto-tab> 应始终与标记中的 role="heading" 一起使用，以便在 JavaScript 失败时语义仍然可用。

<howto-tab> 通过使用该面板的 ID 作为 aria-controls 属性的值来声明它属于哪个 <howto-panel>。

如果未指定，<howto-tab> 将自动生成唯一 ID。

  class HowtoTab extends HTMLElement {

    static get observedAttributes() {
      return ['selected'];
    }

    constructor() {
      super();
    }

    connectedCallback() {

如果执行此操作，则 JavaScript 正在工作，并且该元素将其角色更改为 tab。

      this.setAttribute('role', 'tab');
      if (!this.id)
        this.id = `howto-tab-generated-${howtoTabCounter++}`;

设置明确定义的初始状态。

      this.setAttribute('aria-selected', 'false');
      this.setAttribute('tabindex', -1);
      this._upgradeProperty('selected');
    }

检查属性是否具有实例值。如果有，则复制该值，并删除实例属性，使其不遮盖类属性 setter。最后，将该值传递给类属性 setter，以便它可以触发任何副作用。这是为了防止在某些情况下，例如，框架可能已将元素添加到页面并在其属性之一上设置值，但延迟加载了其定义。如果没有此保护，升级后的元素将错过该属性，并且实例属性将阻止类属性 setter 被调用。

    _upgradeProperty(prop) {
      if (this.hasOwnProperty(prop)) {
        let value = this[prop];
        delete this[prop];
        this[prop] = value;
      }
    }

属性及其相应的属性应相互镜像。为此，selected 的属性 setter 处理真值/假值，并将这些值反映到属性的状态。重要的是要注意，属性 setter 中没有发生任何副作用。例如，setter 不设置 aria-selected。相反，该工作发生在 attributeChangedCallback 中。作为一般规则，使属性 setter 非常简单，并且如果设置属性或属性应引起副作用（例如设置相应的 ARIA 属性），请在 attributeChangedCallback() 中完成该工作。这将避免必须管理复杂的属性/属性重入场景。

    attributeChangedCallback() {
      const value = this.hasAttribute('selected');
      this.setAttribute('aria-selected', value);
      this.setAttribute('tabindex', value ? 0 : -1);
    }

    set selected(value) {
      value = Boolean(value);
      if (value)
        this.setAttribute('selected', '');
      else
        this.removeAttribute('selected');
    }

    get selected() {
      return this.hasAttribute('selected');
    }
  }

  customElements.define('howto-tab', HowtoTab);

  let howtoPanelCounter = 0;

HowtoPanel 是 <howto-tabs> 标签页面板的面板。

  class HowtoPanel extends HTMLElement {

    constructor() {
      super();
    }

    connectedCallback() {
      this.setAttribute('role', 'tabpanel');
      if (!this.id)
        this.id = `howto-panel-generated-${howtoPanelCounter++}`;
    }
  }

  customElements.define('howto-panel', HowtoPanel);
})();

HowTo 组件 – howto-tabs 通过集合保持井井有条 根据您的偏好保存内容并进行分类。

摘要

参考

演示

用法示例

代码

HowTo 组件 – howto-tabs
通过集合保持井井有条根据您的偏好保存内容并进行分类。