Question

我要使用此Tab系统：

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>

如何使用MDC的标签栏？

1 个答案: