Question

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

如果我使用source code，则如示例所示，在聚焦于文本字段时应该有一个动画，但是我在扩展程序中没有这种体验。

我真的希望这不是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没问题，但是由于不再受支持，我认为我会使用现代框架进行重建。

Answer 1

MDC与MDL有点不同，因为js依赖功能要求您实例化MDC组件。有多种方法可以做到这一点，具体取决于您incorporating the MDC js into your project的状况。在上面的html示例中，您可能会添加带有单线的脚本标记以实例化MDC文本字段。像这样：

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

您还可以将mdc.autoInit()与data-mdc-auto-init标记一起使用来实例化MDC组件（有关详细信息，请参见Auto Init docs）。

Chrome扩展程序中的Material Design组件Web

1 个答案: