Fre*_*esh 5 html javascript css material-design
因此，我试图弄清楚如何使用 Material.io 作为我正在做的一些 Web 应用程序实验的前端，但我只想利用 CDN 而不是 npm。我有点遵循这里找到的示例： https: //codelabs.developers.google.com/codelabs/mdc-101-web/#1，但它假设使用 npm。现在我已经导入了 CSS 和 JS 的 Material 组件，并且有一个基本的登录表单，带有一些样式，但我不知道如何让 JavaScript 正确运行并产生表单框动画参见此处的示例： https: //codelabs.developers.google.com/codelabs/mdc-101-web/#2。
HTML：
<html>
<head>
<!-- Import Material components CSS and JS -->
<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>
<body>
<div class="login_container">
<div class="box" id="two">
<form>
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
</form>
</div>
</div>
</body>
</html>
CSS：
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
JavaScript：
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
我意识到这可能不起作用，因为它假设 npm 设置，但我也尝试过这个，但它不起作用：
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
任何帮助都是值得赞赏的，即使它只是指向我一个新文档或其他东西。我似乎无法在 Material 文档中找到正确的答案，因为它假设或建议使用 npm。
小智 6
该文档可以在这里找到： https://material.io/develop/web/guides/importing-js
查看“全局/CDN”下的内容。你可以在那里找到这个模式：
const MDCFoo = mdc.foo.MDCFoo;
const MDCFooFoundation = mdc.foo.MDCFooFoundation;
使用上面的模式，您可以替换以下行：
import {MDCTextField} from '@material/textfield';
有了这个代码：
const MDCTextField = mdc.textField.MDCTextField;
| 归档时间： |
|
| 查看次数： |
2152 次 |
| 最近记录： |