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

您的代码有几个问题：

如documentation所示，您在文本字段内的输入元素上缺少mdc-text-field__input类。
您的输入元素上有一个text-field--outlined类，但这很可能什么也没做。如果要使用概述的变体，则也可以在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来实例化两个文本字段（或其中任意数量）的JS：

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

MDC文本框不能正确渲染

1 个答案: