0

我创建了一个简单的 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>

在此处输入图像描述

4

1 回答 1

2

您的代码有几个问题：

  • 如文档中所示，您缺少mdc-text-field__input文本字段中输入元素的类。
  • 您的输入元素上有一个text-field--outlined类，但这很可能什么也没做。如果您想使用概述的变体，也可以在文档中找到正确的标记。请注意，它比填充（框）变体具有更多标记。
  • 您没有为这些文本字段实例化 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);
});
于 2018-08-14T15:02:16.903 回答