javascript - 如何使用 MDC 的标签栏？

Question

我想使用这个标签系统：

https://material-components.github.io/material-components-web-catalog/#/component/tabs

我阅读了上述链接的 HTML 源代码并实现了一个标签栏。

但是，如何使用此标签栏切换显示的内容？我需要编写 JavaScript 吗？

Answer 1

是的，它是一个 JavaScript 库......所以您需要导入 JavaScript。

首先你需要安装库，安装说明可以在这里找到。

接下来，您可以按照这些说明继续使用标签栏。

这是一个快速工作演示，表明它是可能的，（但我不建议使用此代码）

<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<!-- Render tab barcomponent -->
<div class="mdc-tab-bar" role="tablist">
  <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" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

Answer 2

var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
var contentEls = document.querySelectorAll('.content');

tabBar.listen('MDCTabBar:activated', function(event) {
  // Hide currently-active content
  document.querySelector('.content--active').classList.remove('content--active');
  // Show content for newly-activated tab
  contentEls[event.detail.index].classList.add('content--active');
});

.content {
  display: none;
}

.content--active {
  display: block;
}

<div class="mdc-tab-bar" role="tablist">
  <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" role="tab" aria-selected="true" tabindex="0">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">One</span>
                  </span>
                  <span class="mdc-tab-indicator mdc-tab-indicator--active">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>
        <button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">Two</span>
                  </span>
                  <span class="mdc-tab-indicator mdc-tab-indicator">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>
        <button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">Three</span>
                  </span>
                  <span class="mdc-tab-indicator mdc-tab-indicator">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>
      </div>
    </div>
  </div>
</div>
<div class="content content--active">
  <p>Content one</p>
</div>
<div class="content">
  <p>Content two</p>
</div>
<div class="content">
  <p>Content three</p>
</div>