MDC 文本框未正确呈现

Question

我创建了一个简单的 MDC 卡，上面有一些 MDC 文本字段按钮。但是，文本框未正确呈现。从下图中可以看出，右上角和左上角有缝隙。下面是我的代码：

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Card Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <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>

    <div class="mdc-card">
        <div class="">
            <div class="card-header">
                <div class="mdc-card__actions">
                    <div class="mdc-text-field mdc-text-field--box username">
                        <input type="text" class="text-field--outlined" id="username-input" name="username" required>
                        <label class="mdc-floating-label" for="username-input">Email</label>
                        <div class="mdc-line-ripple"></div>
                    </div>
                </div>
                <div class="mdc-card__actions">
                    <div class="mdc-text-field mdc-text-field--box password">
                        <input type="password" class="text-field--outlined" 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>
            </div>
            <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>

</html>

Answer 1

您的代码存在几个问题：

您的文本字段中的输入元素缺少 mdc-text-field__input class，如 documentation 中所示。
您的输入元素上有一个 text-field--outlined class，但这很可能什么也没做。如果您想使用概述的变体，也可以在 documentation 中找到正确的标记。请注意，它比填充（框）变体具有更多标记。
您没有为这些文本字段实例化 JavaScript 组件，而这些组件是其完全运行所必需的。

我还建议不要按照您的使用方式使用 mdc-card__actions，因为它实际上是用于卡片底部的（每张卡片一次使用）。

这是一个适用于填充（框）变体的标记示例：

<div class="mdc-card">
  <div>
    <div class="mdc-text-field mdc-text-field--box username">
      <input class="mdc-text-field__input" type="text" id="username-input" name="username" required>
      <label class="mdc-floating-label" for="username-input">Email</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </div>
  <div>
    <div class="mdc-text-field mdc-text-field--box password">
      <input class="mdc-text-field__input" type="password" 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>
</div>

下面是实例化两个文本字段（或任意数量）的 JS：

[].forEach.call(document.querySelectorAll('.mdc-text-field'), function(el) {
  mdc.textField.MDCTextField.attachTo(el);
});

MDC 文本框未正确呈现

MDC Textfield Boxes Not Rendering Properly

html

material-design

material-components

mdc-components

material-components-web