代码之家 › 专栏 › 技术社区 › M.K.

MDC文本字段框未正确呈现

material-components-web mdc-components material-components material-design html

0

M.K. · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

2

Ken Franqueiro 7 年前

代码有几个问题:

你错过了 mdc-text-field__input 在文本字段中的输入元素上初始化,如 documentation
你有一个 text-field--outlined 在输入元素上初始化,但这很可能不会执行任何操作。如果要使用概述的变量,也可以在 documentation . 请注意,它比填充(框)变量具有更多的标记。

我也建议不要使用 mdc-card__actions 你使用它的方式,因为它真正的目的是在一张卡的底部使用(每张卡使用一次)。

对于filled(box)变量,下面是一个有效的标记示例:

<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>

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