为 Material Design WEB 启动 Javascript答案

【问题标题】：Initiate the Javascript for Material Design WEB为 Material Design WEB 启动 Javascript
【发布时间】：2020-09-01 17:44:31
【问题描述】：

我正在使用 Material Design WEB 组件。

添加了下面的css和js

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

在我尝试过的单独的 JS 文件上

const textField = document.querySelector('.mdc-text-field');
mdc.textField.MDCTextField.attachTo(textField);

const button = document.querySelector(".mdc-button");
mdc.ripple.MDCRipple.attachTo(button);

const formField = document.querySelector('.mdc-form-field');
const checkbox = document.querySelector('.mdc-checkbox');
mdc.formField.input= checkbox;

如果我在 HTML 中有两个文本框，则仅适用于第一个元素，不适用于其他元素。复选框根本不起作用。

<label class="mdc-text-field mdc-text-field--outlined">
                    <input type="text" class="mdc-text-field__input" asp-for="Username" autofocus aria-labelledby="user name">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" asp-for="Username">User Name</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                </label>


<label class="mdc-text-field mdc-text-field--outlined">
                    <input type="password" class="mdc-text-field__input" asp-for="Password" aria-labelledby="password">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" asp-for="Password" autocomplete="off">Password</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                </label>

我在哪里可以找到类似这样的 JavaScript 实例化列表：

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

【问题讨论】：

你能附上我们可以运行的代码 sn-p 吗？

标签： javascript html css material-design

【解决方案1】：

将 data-mdc-auto-init 附加到根元素对我有用。

<button class="mdc-icon-button" 
   aria-label="Add to favorites"
   aria-pressed="false"
   data-mdc-auto-init="MDCIconButtonToggle">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

在页面底部

<script>mdc.autoInit()</script>

参考https://material.io/develop/web/components/auto-init/

【讨论】：