如何使用MDC的tab bar？

Question

我想使用这个Tab系统：

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

我阅读了上面的HTML源代码link并实现了一个标签栏。

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

Answer 1

是的，它是一个 JavaScript 库....因此您需要导入 JavaScript。

首先需要安装库，安装说明可以found here.

接下来您可以继续使用标签栏，following these instructions。

这里有一个快速运行的演示，展示了它的可行性，（但我不建议使用此代码）

<!-- 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>

如何使用MDC的tab bar？

How to use MDC's tab bar?

html

javascript

mdc-components