MDC按钮波纹根本不绘制
MDC按钮波纹根本不绘制
提问于 2020-11-09 07:22:48
所以我使用没有node.js的MDC (材料设计组件)，这意味着我必须像这样导入它：
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>所以CSS运行得很好，我可以使用MDC中的任何类，它工作得无懈可击。
但JavaScript附加效果存在一些局部问题。TextField运行良好-当我单击它时，文本会移动。但任何其他JS效果都不起作用。
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id">OpenWeatherMap API key</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id" style="width: 512px;">
</label>
<br>
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__label">Grant location permision</span>
</button>
<script>
mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button')); <!-- This does not work>
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field')); <!-- This works fine>
</script>有人知道怎么解决这个问题吗？我找到的都试过了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-18 21:21:19
您需要在按钮内添加mdc-button__ripple元素：
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Grant location permision</span>
</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64747310
复制相关文章
相似问题
Alexa Lambda DynamoDB不返回任何内容
Alexa API调用没有返回任何内容。
Alexa的AMAZON.LITERAL插槽不返回任何内容
Alexa模拟器“挂起”
Alexa模拟器显示黑屏
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
