Material Design 中的文字输入框实现教程

Material Design 是 Google 推出的设计语言，它提供了一套一致的设计规范，使得设计师可以更轻松地创建出美观且具有一致性的界面。其中，文字输入框是一个非常常见的 UI 元素，下面我们就来学习一下在 Material Design 中如何实现文字输入框。

基本的文字输入框

Material Design 中的文字输入框由一个输入框和与之关联的标签组成。标签可以在输入框中浮动，以提供有关输入内容的上下文。下面是一个基本的文字输入框示例：

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label for="my-text-field" class="mdc-floating-label">请输入用户名</label>
  <div class="mdc-line-ripple"></div>
</div>

在这个示例中，我们使用了 Material Design 组件库中的 mdc-text-field 组件来创建文字输入框。其中，mdc-text-field__input 类用于指定输入框元素，mdc-floating-label 类用于指定标签元素，mdc-line-ripple 类用于指定输入框下方的波纹效果。

文字输入框的状态

在实际应用中，文字输入框可能会处于不同的状态，比如聚焦状态、禁用状态、错误状态等。在 Material Design 中，这些状态都有对应的样式和交互效果。下面是一些常见的状态示例：

聚焦状态

当用户点击输入框时，输入框会进入聚焦状态。此时，标签会向上浮动并缩小，输入框下方会出现一个波纹效果。下面是一个聚焦状态的示例：

<div class="mdc-text-field mdc-text-field--focused">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label for="my-text-field" class="mdc-floating-label mdc-floating-label--float-above">请输入用户名</label>
  <div class="mdc-line-ripple"></div>
</div>

在这个示例中，我们添加了 mdc-text-field--focused 类来指定聚焦状态。同时，我们还添加了 mdc-floating-label--float-above 类来指定标签元素在聚焦状态下浮动并缩小。

禁用状态

当输入框被禁用时，其外观和交互效果会发生变化。下面是一个禁用状态的示例：

<div class="mdc-text-field mdc-text-field--disabled">
  <input type="text" id="my-text-field" class="mdc-text-field__input" disabled>
  <label for="my-text-field" class="mdc-floating-label">请输入用户名</label>
  <div class="mdc-line-ripple"></div>
</div>

在这个示例中，我们添加了 mdc-text-field--disabled 类来指定禁用状态。同时，我们还将输入框元素的 disabled 属性设置为 true。

错误状态

当输入框中的内容不合法时，我们可以将其设置为错误状态。在 Material Design 中，错误状态下输入框和标签的颜色会变为红色，下方的波纹效果会变为红色。下面是一个错误状态的示例：

<div class="mdc-text-field mdc-text-field--invalid">
  <input type="text" id="my-text-field" class="mdc-text-field__input" value="123">
  <label for="my-text-field" class="mdc-floating-label mdc-floating-label--float-above mdc-floating-label--shake">请输入用户名</label>
  <div class="mdc-line-ripple mdc-line-ripple--active"></div>
</div>

在这个示例中，我们添加了 mdc-text-field--invalid 类来指定错误状态。同时，我们还添加了 mdc-floating-label--shake 类来指定标签元素在错误状态下抖动。

文字输入框的交互效果

在 Material Design 中，文字输入框有一些交互效果，比如点击标签元素时输入框自动聚焦、点击清除按钮时清空输入框内容等。下面是一些常见的交互效果示例：

自动聚焦

当用户点击标签元素时，输入框会自动聚焦。下面是一个自动聚焦的示例：

<div class="mdc-text-field mdc-text-field--focused">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label for="my-text-field" class="mdc-floating-label mdc-floating-label--float-above mdc-floating-label--focused">请输入用户名</label>
  <div class="mdc-line-ripple"></div>
</div>

在这个示例中，我们添加了 mdc-floating-label--focused 类来指定标签元素在自动聚焦时浮动并缩小。

清空按钮

当输入框中有内容时，会显示一个清空按钮，点击该按钮可以清空输入框内容。下面是一个清空按钮的示例：

<div class="mdc-text-field mdc-text-field--with-trailing-icon">
  <input type="text" id="my-text-field" class="mdc-text-field__input" value="123">
  <label for="my-text-field" class="mdc-floating-label">请输入用户名</label>
  <div class="mdc-line-ripple"></div>
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing">cancel</i>
</div>

在这个示例中，我们添加了 mdc-text-field--with-trailing-icon 类来指定清空按钮。同时，我们还添加了一个带有 material-icons 类的 <i> 元素来指定清空按钮的图标。

总结

通过本文的学习，我们了解了 Material Design 中文字输入框的实现方式，以及它们的状态和交互效果。在实际应用中，我们可以根据需求使用相应的样式和交互效果来实现一个美观且易用的文字输入框。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658aaccdeb4cecbf2dfec5d3