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>
“...并实例化JavaScript:mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));”
那么我该如何实例化JavaScript呢?
我尝试将此代码放置在script标记之间,但无效。我想我在这里缺少一些代码。
更新:JS CDN似乎可以工作,但在每个组件中,我都会得到JavaScript实例化的指令,例如在此链接中: https://material.io/develop/web/components/input-controls/text-field/ “import {MDCTextField} from '@material/textfield'; const textField = new MDCTextField(document.querySelector('.mdc-text-field'))”
我的问题是,在哪里插入此代码以使组件正常工作?