因此,我试图弄清楚如何使用 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" …Run Code Online (Sandbox Code Playgroud)