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

Question

我想使用这个选项卡系统:

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

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

但是，如何使用这个标签栏切换显示内容呢？我需要编写 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>