1

首先让我说 mdc 文档对于像我这样的非专业人士来说很难。

我正在使用 Elixir Phoenix 和 Brunch。我进口，一切都很好。

import {MDCTab, MDCTabFoundation} from '@material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '@material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'@material/tabs';

我在导出的单独函数中手动实例化选项卡栏

export var Tabbable = {
  run: function(MDCTabBar, el){
    var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));

遵循这样的文档

const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));

但与文档在其代码片段中使用标签栏略有不同

var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));

但是，每当我尝试使用 mdc 时，都会出现“未定义”错误。因此，我没有使用它:-)

现在，当用户单击标签栏时，我会这样捕获：

myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
  var nthChildIndex = tabs.activeTabIndex;
  updatePanel(nthChildIndex);
});

细微的区别是我的 myDynamicTabBar 是 MDCTabBar 但文档的 dynamicTabBar 是 mdc.tabs.MDCTabBar

我的选项卡控件有效，但它引发了仅在控制台中可见的错误：

未捕获的错误：作为 activeTab 给出的无效选项卡组件：在此组件的选项卡列表中找不到选项卡

这可能是因为我没有使用mdc.tabs？文档指出更改事件发生在 MDCTabBar 上。

因此，如何摆脱控制台中这个恼人的错误？

为什么我无法访问全局 mdc？我在我的早午餐文件中试过这个

globals: { mdc: "@material"}

但不好。

4

2 回答 2

0

我在这个线程中找到了真正的解决方案https://github.com/hyperapp/hyperapp/issues/546 MDCTabBar 自动启动它的孩子。因此，启动选项卡将导致该错误。解决方法是启动 MDCTabBar

于 2018-04-27T20:32:20.923 回答
0

这点我就在你身后！我也对文档感到沮丧:(

您在这个 Elixir 线程中回答了您自己的问题，该线程提供了非常丰富的信息。

于 2017-11-23T07:17:46.837 回答