คอมโพเนนต์วิธีการ – แท็บวิธีการ

สรุป

<howto-tabs> จํากัดเนื้อหาที่มองเห็นได้โดยแยกเนื้อหาออกเป็นหลายแผง เฉพาะ แผงหนึ่งจะแสดงได้ครั้งละ 1 แผง ส่วนแท็บที่เกี่ยวข้องทั้งหมดจะแสดงเสมอ มองเห็นได้ หากต้องการสลับจากแผงหนึ่งไปยังอีกแผงหนึ่ง แท็บที่เกี่ยวข้องจะ ที่เลือกไว้

ผู้ใช้สามารถเปลี่ยนการตั้งค่า โดยคลิกหรือใช้ปุ่มลูกศร แท็บที่ใช้งานอยู่

หากปิดใช้ 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,
  };

อินสแตนซ์ <howto-tabs> ทั้งหมดจะแชร์เทมเพลตสำหรับเนื้อหาของ Shadow DOM เพื่อหลีกเลี่ยงการเรียกใช้โปรแกรมแยกวิเคราะห์ด้วย .innerHTML สำหรับอินสแตนซ์ใหม่ทุกรายการ

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

สำหรับการเพิ่มประสิทธิภาพแบบต่อเนื่อง มาร์กอัปควรสลับระหว่างแท็บและแผง องค์ประกอบที่จัดเรียงองค์ประกอบย่อยใหม่มักจะทำงานได้ไม่ดีกับเฟรมเวิร์ก แต่มีการใช้ Shadow 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() {

องค์ประกอบต้องจัดการเหตุการณ์การป้อนข้อมูลด้วยตนเอง เพื่อให้สลับใช้แป้นลูกศรและหน้าแรก / สิ้นสุดได้

      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() จะนำ Listener เหตุการณ์ที่ connectedCallback() เพิ่มออก

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

ระบบจะเรียกใช้ _onSlotChange() เมื่อมีการเพิ่มหรือนำองค์ประกอบออกจากช่องโฆษณา Shadow DOM

    _onSlotChange() {
      this._linkPanels();
    }

_linkPanels() ลิงก์แท็บกับแผงที่อยู่ติดกันโดยใช้ aria-control และ 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;

ลักษณะการใช้งานสวิตช์จะกำหนดว่าแท็บใดควรมีสถานะเป็นใช้งานอยู่ โดยขึ้นอยู่กับแป้นที่กด

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

เบราว์เซอร์อาจมีฟังก์ชันการทำงานดั้งเดิมบางอย่างที่เชื่อมโยงกับปุ่มลูกศร หน้าแรก หรือจุดสิ้นสุด องค์ประกอบจะเรียก preventDefault() เพื่อป้องกันไม่ให้เบราว์เซอร์ดำเนินการใดๆ

      event.preventDefault();

เลือกแท็บใหม่ซึ่งได้กำหนดไว้ในกรณีสวิตช์

      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> รายการที่สร้าง ระบบจะใช้หมายเลขเพื่อสร้างรหัสที่ไม่ซ้ำกันใหม่

  let howtoTabCounter = 0;

HowtoTab คือแท็บของแผงแท็บ <howto-tabs> ควรใช้ <howto-tab> กับ role="heading" เสมอในมาร์กอัปเพื่อให้ความหมายยังคงใช้งานได้เมื่อ JavaScript ล้มเหลว

<howto-tab> จะประกาศว่า <howto-panel> นี้เป็นของใดโดยใช้รหัสของแผงเป็นค่าสำหรับแอตทริบิวต์ aria-controls

<howto-tab> จะสร้างรหัสที่ไม่ซ้ำกันโดยอัตโนมัติหากไม่มีการระบุไว้

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

ตรวจสอบว่าพร็อพเพอร์ตี้มีค่าอินสแตนซ์หรือไม่ หากใช่ ให้คัดลอกค่าและลบพร็อพเพอร์ตี้ของอินสแตนซ์เพื่อไม่ให้เป็นเงาตัวตั้งค่าพร็อพเพอร์ตี้คลาส สุดท้าย ส่งค่าไปยังตัวตั้งค่าพร็อพเพอร์ตี้คลาสเพื่อให้ทริกเกอร์ผลข้างเคียงใดๆ ได้ ทั้งนี้เพื่อป้องกันไม่ให้เกิดกรณีต่างๆ เช่น เฟรมเวิร์กอาจเพิ่มองค์ประกอบลงในหน้าและตั้งค่าในพร็อพเพอร์ตี้รายการใดรายการหนึ่ง แต่ Lazy Loading โหลดคำจำกัดความไปแล้ว หากไม่มีการป้องกันนี้ องค์ประกอบที่อัปเกรดจะพลาดพร็อพเพอร์ตี้ดังกล่าวและพร็อพเพอร์ตี้อินสแตนซ์จะป้องกันไม่ให้มีการเรียกใช้ตัวตั้งค่าพร็อพเพอร์ตี้คลาส

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

โดยพร็อพเพอร์ตี้และแอตทริบิวต์ที่เกี่ยวข้องควรเหมือนกัน เพื่อให้ได้ผลลัพธ์นี้ ตัวตั้งค่าพร็อพเพอร์ตี้สำหรับ selected จะจัดการค่าที่แท้จริง/ที่ไม่เป็นจริง และจะแสดงค่าเหล่านั้นกับสถานะของแอตทริบิวต์ โปรดทราบว่าไม่มีผลข้างเคียงที่เกิดขึ้นในการตั้งค่าพร็อพเพอร์ตี้ ตัวอย่างเช่น ตัวตั้งค่าไม่ได้ตั้งค่า aria-selected แต่งานนั้นจะเกิดขึ้นใน attributeChangedCallback แทน ตามกฎทั่วไปแล้ว คุณควรทำให้การตั้งค่าพร็อพเพอร์ตี้โง่มาก และหากการตั้งค่าพร็อพเพอร์ตี้หรือแอตทริบิวต์ควรทำให้เกิดผลข้างเคียง (เช่น การตั้งค่าแอตทริบิวต์ 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);
})();