Material Design 下的带阴影的文本框-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，漂亮、高效的 UI 是前端工程师们必要的技能之一。Material Design 是 Google 在 2014 年提出的一种新的设计语言，旨在创建具有深度、层次感和清晰度的 UI，与此同时还追求柔和的动画效果。其中，带阴影的文本框是 Material Design 中常用的 UI 元素。

在本文中，我们将讨论 Material Design 下的带阴影的文本框的设计和实现，详细介绍它们的结构和样式，并给出示例代码和最佳实践指导。

设计与结构

带阴影的文本框通常用于表单输入等场景，主要特点是底部有阴影，并显示相应的文本提示来指导用户，如下图所示：

在设计结构时，我们可以使用 HTML 和 CSS 来实现这个功能。下面是代码示例：

<div class="mdc-text-field mdc-text-field--filled">
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-floating-label" id="my-label-id">Your Name</span>
  <div class="mdc-line-ripple"></div>
</div>

我们使用了 MDC-Web 中的 CSS 类 mdc-text-field、mdc-text-field--filled、mdc-text-field__input、mdc-floating-label 和 mdc-line-ripple，来实现带阴影的文本框。

其中，mdc-text-field 是文本框的根级别类，mdc-text-field--filled 用于指定文本框的类型是填充类型。mdc-text-field__input 用于指定文本框的输入框。

mdc-floating-label 用于指定浮动标签，即提示用户输入内容的文本。mdc-line-ripple 用于指定底部阴影。

使用上述代码，我们可以得到一个带阴影的文本框。但是，样式还不够理想，下一步我们需要进行样式设计。

样式设计

在样式设计中，主要是通过 CSS 来实现，下面是示例代码：

// www.javascriptcn.com code example
.mdc-text-field {
  position: relative;
  overflow: hidden;
  height: 56px;
  display: inline-flex;
  flex-direction: column;
}

.mdc-text-field__input {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 100%;
  width: 100%;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.mdc-floating-label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  font-weight: 400;
  line-height: 56px;
}

.mdc-line-ripple {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(0, 0, 0, 0.42);
  transform-origin: center center;
  transform: scale(0, 1);
  transition: transform 180ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

.mdc-text-field--focused .mdc-line-ripple {
  transform: scale(1);
}

.mdc-text-field--notched .mdc-floating-label {
  transform: translateY(-24px) scale(0.75);
}

.mdc-text-field--notched .mdc-line-ripple {
  transform-origin: left center;
}

.mdc-text-field--notched .mdc-line-ripple::before,
.mdc-text-field--notched .mdc-line-ripple::after {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #0070f3;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

.mdc-text-field--focused .mdc-line-ripple::before,
.mdc-text-field--focused .mdc-line-ripple::after {
  opacity: 1;
}
.mdc-text-field--notched .mdc-line-ripple::before {
  top: -1px;
}
.mdc-text-field--notched .mdc-line-ripple::after {
  bottom: -1px;
}

上述代码使用了 MDC-Web 中的不同样式，如 .mdc-text-field、.mdc-text-field__input、.mdc-floating-label、.mdc-line-ripple 等，它们分别用于定义文本框、输入框、浮动标签和下划线的样式。

其中，还有一些伪类选择器用于控制文本框的状态，如 .mdc-text-field--focused、.mdc-text-field--notched 等，它们可以用在特定的情况下来指定状态的样式属性。

使用上述样式，我们可以得到一个符合 Material Design 标准的带阴影的文本框。

最佳实践指导

在使用带阴影的文本框时，我们应该注意以下几点：

充分利用 Material Design 提供的样式库。MDC-Web 中提供了非常灵活和丰富的样式类，可以应对各种可能出现的情况，因此尽可能多地使用这些样式类是开发中的好习惯。
注意文本框的输入响应时间。带阴影的文本框通常用于用户输入的场景，因此在实现时要注意文本框的输入响应时间。可以使用异步方式进行提交，以提高用户输入速度。
保持一致性。Material Design 是目前相对流行的设计语言之一，因此在设计带阴影的文本框时应尽可能遵循 Material Design 的设计规范和原则，保持界面一致性。
考虑性能。在使用带阴影的文本框时，要注意样式的性能问题。可以通过压缩和打包 CSS 文件、使用缓存和 HTTP2 服务器等手段来优化页面加载速度。

总之，带阴影的文本框是 Material Design 的一个重要 UI 元素，在实现时要尽可能遵循 Material Design 的原则和规范，同时保证响应时间和性能。

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

Material Design 下的带阴影的文本框

设计与结构

样式设计

最佳实践指导

接着读