Веб-дизайн материала MDCTab: после активации вкладки событие не генерируется - PullRequest
Новая
       60

Веб-дизайн материала MDCTab: после активации вкладки событие не генерируется

0 голосов
/ 14 октября 2018

Я использую это

https://material.io/develop/web/components/tabs/tab-bar/

Чтобы создать панель вкладок 

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<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">title</span>
                        <span class="mdc-tab__text-label">Name</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" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
                        <span class="mdc-tab__text-label">Tags</span>
                    </span>
                    <span class="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" 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 class="mdc-tab__text-label">Status</span>
                    </span>
                    <span class="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" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
                        <span class="mdc-tab__text-label">Restriction</span>
                    </span>
                    <span class="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" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
                        <span class="mdc-tab__text-label">Other</span>
                    </span>
                    <span class="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>

и этот JS 

    const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
    tabBar.listen('MDCTab:interacted', function (event) {
        alert(1);
    });
    document.querySelectorAll('.mdc-tab-bar button')[3].click();
    //tabBar.activateTab(3);

Вызовщелчок срабатывает (с помощью кода или вручную с помощью мыши), генерирует событие и выдает предупреждение «1».Однако я бы предпочел использовать функцию activateTab, но она только активирует вкладку, но не генерирует событие.

Кто-нибудь знает, что здесь не так?

1 Ответ

0 голосов
/ 15 октября 2018

Событие MDCTab:interacted генерируется перед активацией вкладки, поэтому оно не вызывается при использовании метода activateTab.MDCTab:interacted фактически используется панелью вкладок, чтобы узнать, какую вкладку активировать.В зависимости от конечной цели вы можете получить то, что вам нужно, используя событие MDCTabBar:activated, поскольку оно будет инициировано методом activateTab и предоставляет индекс активированной вкладки в подробных данных события.См. Фрагмент ниже для иллюстрации. 

const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
const tabs = document.querySelectorAll('.mdc-tab');

tabBar.listen('MDCTabBar:activated', function(event) {
  let tab = tabs[event.detail.index];
  console.log(tab.children[0].children[1].textContent, 'tab activated');
});

tabBar.activateTab(3); // activate "Restriction" tab
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Tabs Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <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">title</span>
              <span class="mdc-tab__text-label">Name</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" role="tab" aria-selected="false" tabindex="0">
            <span class="mdc-tab__content">
              <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
              <span class="mdc-tab__text-label">Tags</span>
            </span>
            <span class="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" role="tab" aria-selected="false" tabindex="0">
            <span class="mdc-tab__content">
              <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
              <span class="mdc-tab__text-label">Status</span>
            </span>
            <span class="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" role="tab" aria-selected="false" tabindex="0">
            <span class="mdc-tab__content">
              <span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
              <span class="mdc-tab__text-label">Restriction</span>
            </span>
            <span class="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" role="tab" aria-selected="false" tabindex="0">
            <span class="mdc-tab__content">
              <span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
              <span class="mdc-tab__text-label">Other</span>
            </span>
            <span class="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>

</body>

</html>
...