如何使用MDC的标签栏？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/tab-bar@4.0.0/dist/mdc.tab-bar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@material/tab-bar@4.0.0/dist/mdc.tab-bar.min.js"></script>

<div class="mdc-tab-bar">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content">
        <button class="mdc-tab mdc-tab--active">
          <span class="mdc-tab__text-label">标签1</span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active"></span>
        </button>
        <button class="mdc-tab">
          <span class="mdc-tab__text-label">标签2</span>
          <span class="mdc-tab-indicator"></span>
        </button>
        <button class="mdc-tab">
          <span class="mdc-tab__text-label">标签3</span>
          <span class="mdc-tab-indicator"></span>
        </button>
      </div>
    </div>
  </div>
</div>

const tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));

tabBar.listen('MDCTabBar:activated', (event) => {
  const tabs = document.querySelectorAll('.mdc-tab');
  tabs.forEach((tab, index) => {
    if (index === event.detail.index) {
      tab.classList.add('mdc-tab--active');
    } else {
      tab.classList.remove('mdc-tab--active');
    }
  });
});