Material Design 中的输入框规范详解-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是一种流行的设计语言，它提供了统一的设计风格和交互规范。对于前端开发人员来说，理解 Material Design 中的输入框规范是非常重要的，因为输入框是我们经常使用的组件之一。在本篇文章中，我们将深入探讨 Material Design 中的输入框规范，包括输入框的类型、特性、布局和样式等方面。

输入框类型

Material Design 中有四种类型的输入框：文本框、数字框、日期框和搜索框。这些输入框都有不同的输入方式和数据类型。

文本框

文本框是最基本的输入框类型，可以用于输入任意文本，比如用户名、密码等等。在 Material Design 中，文本框会显示一个标签，标签会移动到文本框的顶部，当用户输入内容时，文本框的颜色会发生变化。

数字框

数字框可以用于输入数字，可以设置最小值和最大值。在 Material Design 中，数字框也有标签，当用户输入内容时，文本框的颜色也会变化。

日期框

日期框可以用于输入日期，可以通过日历图标选择日期。在 Material Design 中，日期框会显示一个标签和一个日历图标，当用户选择日期时，文本框的颜色会发生变化。

搜索框

搜索框可以用于搜索内容，可以通过输入文本或语音搜索。在 Material Design 中，搜索框有一个标签和一个搜索图标，当用户输入内容时，文本框的颜色也会变化。

输入框特性

除了不同的输入方式和数据类型外，Material Design 中的输入框还有一些共同的特性。

帮助文本

帮助文本用于提供输入框的格式和错误信息。在 Material Design 中，帮助文本应该在标签下方，并使用灰色字体显示。

<div class="md-form">
  <input type="email" id="inputEmail4" class="form-control">
  <label for="inputEmail4">邮箱地址</label>
  <small id="emailHelp" class="form-text text-muted">我们不会分享您的邮箱地址</small>
</div>

悬浮标签

悬浮标签可以在文本框中显示提示信息或默认值。在 Material Design 中，悬浮标签应该在文本框中央位置，并使用灰色字体显示。

<div class="md-form">
  <input type="text" id="inputPlaceholderEx" class="form-control">
  <label for="inputPlaceholderEx" class="">提示信息</label>
</div>

错误反馈

错误反馈用于提示用户输入错误的内容。在 Material Design 中，当用户提交表单时，输入框如果有错误，应该使用红色字体显示错误信息，并在文本框下方提供错误反馈。

<div class="md-form">
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" required>
  <label for="inputPassword5">密码</label>
  <small id="passwordHelpBlock" class="form-text text-danger">
    密码长度必须不少于8个字符，包括至少一个数字、一个大写字母、一个小写字母和一个特殊字符。
  </small>
</div>

状态变化

在 Material Design 中，输入框的状态有三种：正常状态、悬停状态和活动状态。当鼠标悬停在文本框上方时，文本框边框会变成深色；当文本框正在编辑内容时，文本框的颜色会更改。

输入框布局

输入框应该在表单中合理布局，以提供更好的用户体验。在 Material Design 中，输入框的布局应该符合以下要求：

标签和文本框应该垂直布局；
输入框的宽度应该根据设计需要调整；
输入框之间应该有合理的间距。

-- -------------------- ---- -------
------
  ---- -----------------
    ---- --------------- ------
      ---- ----------------
        ------ ----------- -------------- -------------------- ---------
        ------ --------------------------
        ---- -------------------------
          -------
        ------
      ------
    ------
    ---- --------------- ------
      ---- ----------------
        ------ ----------- ------------- -------------------- ---------
        ------ -------------------------
        ---- -------------------------
          -------
        ------
      ------
    ------
  ------
-------

输入框样式

除了上述特性和布局要求，Material Design 中的输入框还有一些特定的样式要求。

边框颜色

在 Material Design 中，文本框的边框颜色应该根据输入框状态来变化，例如：正常状态为灰色，悬停状态为深灰色，活动状态为蓝色。

.form-control:not(.browser-default):focus:not([readonly]) {
  border-color: #2196f3;
  box-shadow: none;
}

文本框颜色

在 Material Design 中，文本框的颜色应该根据输入框状态来变化，例如：正常状态为黑色，悬停状态为黑色，活动状态为蓝色。

.form-control:not(.browser-default)::-webkit-input-placeholder {
  color: #999;
}

文本框字体大小和颜色

在 Material Design 中，文本框的字体大小和颜色也应该根据输入框状态来变化，例如：正常状态为 $14px$ 的黑色，悬停状态为 $14px$ 的黑色，活动状态为 $18px$ 的蓝色。

input[type=text]:focus:not(.browser-default) + label {
  font-size: 1rem;
  color: #2196f3;
}

总结

在本文中，我们深入探讨了 Material Design 中的输入框规范，包括输入框类型、特性、布局和样式等方面。理解这些规范可以帮助开发人员在实现前端交互时更符合用户体验，而不仅仅是实现功能。希望本文对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648ec6ef48841e9894d2ecb0