5

我正在关注这里的材料设计教程。本教程遵循 Node JS 方法并使用 npm 安装材料设计组件。这很好，我让 MDC 101 项目完全按照教程中的方式运行。一旦我开始输入文本，文本框标签就会很好地浮动到左上角，如页面底部所示。

但是，我想在我的 Scala Play 网络服务中使用 Material Design 组件，因此我将 CSS 链接和 JS 脚本插入到我的网页中（代码如下），如此处所述。我的页面的 HTML 如下所示：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>

<form action="home.html">
    <div class="mdc-text-field mdc-text-field--box username">
        <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
        <label class="mdc-floating-label" for="username-input">Username</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="mdc-text-field mdc-text-field--box password">
        <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
        <label class="mdc-floating-label" for="password-input">Password</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="button-container">
        <button type="button" class="mdc-button cancel">
            Cancel
        </button>
        <button class="mdc-button mdc-button--raised next">
            Next
        </button>
    </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>
</html>

如果您在浏览器中渲染它，可以看到在显示 MDC 文本字段时，标签不会像在 Node.js 下运行的教程示例中那样浮动。

我在这里想念什么？我怀疑这与某些 Javascript 未激活有关（此处为 Javascript noob）

4

3 回答 3

9

您需要实例化 MDC 文本字段组件。一种快速而肮脏的方法是使用以下 JavaScript 将脚本标记添加到您的 html 中。

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
于 2018-06-27T21:39:49.980 回答
1

对于遵循官方入门指南进行安装MDC的未来访问者，webpack对我有用的只是在捆绑的 JS 文件中添加初始化 TextField （如文档中所述）：

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

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
于 2019-06-15T15:28:22.203 回答
0

这个 Jquery 是一个糟糕的组合，我并不为此感到自豪，但它确实有效并且不需要 import 语句。

<script type="text/javascript">
 $(document).ready(function() { 
   $("#user-input").val("Player One");
   $("label[for='user-input']").addClass("mdc-floating-label--float-above");
   $("#user-input").focus();
   $("#user-input").blur();
 });
</script>

它设置值，添加使标签浮动所需的类，然后快速添加和删除文本字段的焦点，这会触发 MDC 中的轮廓代码以删除轮廓缺口。

于 2021-02-24T14:38:12.367 回答