我目前正在使用“手动实例化”方法,效果很好。我注意到“自动实例化”方法,但无法让它工作。使用这种方法究竟需要什么?
当我使用代码时:
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
我收到错误日志记录:“未捕获的 ReferenceError:未定义 mdc”。
谢谢。
我目前正在使用“手动实例化”方法,效果很好。我注意到“自动实例化”方法,但无法让它工作。使用这种方法究竟需要什么?
当我使用代码时:
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
我收到错误日志记录:“未捕获的 ReferenceError:未定义 mdc”。
谢谢。
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 属性访问组件实例。
我只需要简单地添加整个 javascript 文件 MDC 包。
<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>
只有这样才是 mdc。与自动初始化一起定义和使用。