启动Material Design WEB的Javascript
启动Material Design WEB的Javascript
提问于 2020-05-16 03:35:45
我正在使用Material Design WEB components。
添加了下面的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'));回答 1
Stack Overflow用户
发布于 2020-05-16 12:46:08
将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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61827032
复制相关文章
相似问题
腾讯云开发者
