1

我有一个当前使用Material Design Components Web的 Chrome 扩展程序。我使用未缩小的 CSS 没有问题，但是 JS 似乎无法正常工作。

如果我使用源代码，则在关注文本字段时应该有一个动画，如示例所示，但我在我的扩展程序中没有遇到这种情况。

我真的希望这不是 Chrome 的某种安全限制......他们的浏览器无法检测和支持他们自己的框架是没有意义的。

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chrome Ext</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <div class="mdc-text-field">
      <input type="text" id="my-text-field" class="mdc-text-field__input">
      <label class="mdc-floating-label" for="my-text-field">Hint text</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </body>
</html>

“提示文本”应出现在文本上方，如上面的示例。

注意：我对 Material Design Lite 没有任何问题，但由于不再支持它，我想我会使用现代框架进行重建。

4

1 回答 1

0

MDC 与 MDL 有点不同，因为依赖于 js 的功能需要您实例化 MDC 组件。有多种方法可以做到这一点，具体取决于您如何将 MDC js 合并到您的项目中。在上面的 html 示例中，您可能会添加一个带有单行符的脚本标记来实例化 MDC 文本字段。就像是：

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

您还可以使用mdc.autoInit()withdata-mdc-auto-init标记来实例化 MDC 组件（有关详细信息，请参阅Auto Init 文档）。

于 2018-09-21T18:16:00.530 回答