4

我目前正在使用“手动实例化”方法,效果很好。我注意到“自动实例化”方法,但无法让它工作。使用这种方法究竟需要什么?

当我使用代码时:

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

我收到错误日志记录:“未捕获的 ReferenceError:未定义 mdc”。

参考这里: https ://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

谢谢。

4

2 回答 2

3

Material Components Web Docs - 自动初始化

mdc-auto-init是一个实用程序包,它为简单网站上的 MDC Web 组件提供声明性的、基于 DOM 的初始化方法。请注意,对于更高级的用例和复杂的站点,手动实例化组件将为您提供更大的灵活性。但是,mdc-auto-init 非常适合静态网站、原型和其他最适合简单和方便的用例。

mdc-auto-init将组件附加到元素时,它会使用名称为 的值的属性将该实例分配给元素data-mdc-auto-init。例如,给定

<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
<script type="text/javascript">
    window.mdc.autoInit();
</script>

一旦mdc.autoInit()被调用,您就可以通过该元素上的 MDCTextField 属性访问组件实例。

于 2018-10-03T13:17:57.187 回答
2

我只需要简单地添加整个 javascript 文件 MDC 包。

<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>

只有这样才是 mdc。与自动初始化一起定义和使用。

于 2018-10-14T11:06:50.207 回答