如何激活Material Design JS？

Question

import {MDCTextField} from '@material/textfield';

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

@import "@material/textfield/mdc-text-field";

<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>

<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>

我正在学习与材料设计合作。我认为它像引导程序一样工作，这意味着有一个CDN，然后您只需添加所需的类，所以我从此链接获得CDN：https://material.io/develop/web/docs/getting-started/

添加CDN之后，我得到了CSS的支持，但是没有JavaScript。在说明中说：

…并实例化JavaScript：
mdc.ripple.MDCRipple.attachTo（document.querySelector（'。foo-button'））;

如何实例化Javascript？

我试图将这段代码放在脚本标签之间，但这没有用。我想我这里缺少一些代码。

更新：JS CDN似乎可以工作，但是在每个组件中，例如，我在此链接中获得有关JavaScript实例化的说明：https://material.io/develop/web/components/input-controls/text-field/

从'@ material / textfield'导入{MDCTextField}; const textField =新的MDCTextField（document.querySelector（'。mdc-text-field'））

我的问题是在哪里插入此代码以使组件工作。

Answer 1

我认为CDN JavaScript源可能要依靠jQuery才能运行。如果我的假设正确，则在加载material.io脚本之前，需要添加引用jquery的脚本标签。

如何激活Material Design JS？

问题描述投票：1回答：3

3个回答

最新问题

如何激活Material Design JS？

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3