MDC Автоматическое создание

Question

В настоящее время я использую метод "Instantiation вручную", и он прекрасно работает. Я заметил метод "Автоматическое создание экземпляров", но не могу заставить его работать. Что именно нужно для использования этого метода?

Когда я использую код:

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

Я получаю сообщение об ошибке: "Uncaught ReferenceError: mdc не определен".

Ссылка здесь: https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs

Благодарю.

Answer 1

Веб-документы по компонентам материалов - Auto Init

mdc-auto-init представляет собой пакет утилит, который обеспечивает декларативный метод инициализации на основе DOM для веб-компонентов MDC на простых веб-сайтах. Обратите внимание, что для более сложных сценариев использования и сложных сайтов создание компонентов вручную даст вам больше гибкости. Однако 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 этого элемента.

Answer 2

Мне просто нужно было просто добавить весь пакет MDC для javascript-файла.

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

Только тогда МДЦ. определяется и используется с авто-init.