mdc-components - MDC 自动实例化

Question

我目前正在使用“手动实例化”方法，效果很好。
我注意到“自动实例化”方法，但无法使其工作。
使用这种方法到底需要什么？

当我使用代码时:

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

谢谢。

Answer 1

Material Components Web Docs - Auto Init

mdc-auto-init is a utility package that provides declarative, DOM-based method of initialization for MDC Web components on simple web sites. Note that for more advanced use-cases and complex sites, manual instantiation of components will give you more flexibility. However, mdc-auto-init is great for static websites, prototypes, and other use-cases where simplicity and convenience is most appropriate.

当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 属性访问组件实例。