Как использовать панель вкладок MDC?

Question

Я хочу использовать эту систему вкладок:

https://material -components.github.io / материал-компонента-веб-каталог / # / Компонент / Вкладка

Я прочитал исходный код 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>