带有 CDN 的 Material.io
Posted
技术标签:
【中文标题】带有 CDN 的 Material.io【英文标题】：Material.io with CDN 【发布时间】：2020-09-27 23:35:51 【问题描述】：所以我想弄清楚如何将 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。
【问题讨论】：
【参考方案1】：文档可以在这里找到： 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;
【讨论】：
以上是关于带有 CDN 的 Material.io的主要内容，如果未能解决你的问题，请参考以下文章
道具被变异（在 django 模板和带有 CDN 的 Vue.js 中）