在前端开发中，文本框是一个经常使用的UI控件。Material Design是一种广泛网络应用的设计语言，提供了一系列基于视觉层次的设计原则来创造美观而功能强大的用户界面。Material Design中实现文本框有着独特的风格和交互设计，能够提升用户的交互体验，并且符合Material Design的设计原则。 本篇文章将详细解读如何在Material Design中实现文字输入框的控件。
Material Design中文本框的设计原则
在Material Design中，文本框是一个基本的UI控件，并且有一些重要的设计原则和属性：
- 文本框具有明确的边框和标签，以便用户清晰地理解其用途。
- 给用户清晰的提示，以便他们知道应该输入什么信息。
- 在用户错误输入时给出实时反馈以便于他们快速更正错误。
- 包括以Material Design为基础的UI元素，如标签、文本框、按钮等，以保证一致性和可复用性。
Material Design中文本框的实现
在使用Material Design来实现文本框时，可以使用HTML、CSS和JavaScript。在以下示例代码中，我们将使用HTML和CSS来制作基本的Material Design文本框。
HTML文件：
<div class="mdc-text-field mdc-text-field--filled"> <input type="text" id="my-text-field" class="mdc-text-field__input" /> <label class="mdc-floating-label" for="my-text-field">输入框的标签</label> <div class="mdc-line-ripple"></div> </div>
CSS文件：
@import "@material/textfield/mdc-text-field"; @import "@material/textfield/mdc-text-field.scss"; .mdc-text-field { width: 300px; margin: 20px; }
请注意，示例中使用了 Material Design Web 组件的 CSS 和 Sass 库，以便使用 Material Design 样式。 此外，我们还指定了元素的宽度和边距。
最终的效果图如下所示：
在这个示例中，我们使用了 Material Design 的基本属性，包括标签、输入框以及效果线。我们还可以在文本框中添加其他功能，比如自动填充等等。
Material Design中文本框的高级用法
实现基本的 Material Design 文本框之后，我们可以开始使用更高级的功能。以下是一些示例：
1. 填写时进行验证和反馈
在Material Design中，用户输入错误时，推荐在输入框中使用反馈样式以及元素的尺寸和位置进行错误提示。 在这个示例中，我们将通过CSS使用 Material Design Web 组件库样式，同时通过JavaScript添加验证和错误反馈。
HTML文件：
<div class="mdc-text-field mdc-text-field--filled mdc-text-field--invalid"> <input type="text" id="my-text-field" class="mdc-text-field__input"/> <label class="mdc-floating-label" for="my-text-field">输入框的标签*</label> <div class="mdc-line-ripple"></div> <span class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">请输入正确的用户名</span> </div>
CSS文件：
-- -------------------- ---- ------- --------------- - ------ ------ ------- ----- - ------------------------ ---------------------- - -------------------- ----------------------- - ------------------------ ---------------- - ----------------- ----------------------- - --------------------------- - ------ ----------------------- ----------- ------- - ------------------------ --------------------------- - ----------- -------- -展开代码
JavaScript 文件：
-- -------------------- ---- ------- ----- --------- - ------------------------------------------------- ----- ---------- - ------------------------------------------------------ ----------------------------------- - -- - ----- ------------ - ----- ---- ----- -- ----------------------- -- ------------------------------- - ---------------------- - ----- --- - - ----- ----------------------------------------------------------------- - ---- - ---------------------- - --- -------------------------------------------------------------------- - --展开代码
在这个示例中，当用户在文本框中输入包含 $、% 或 @字符的文本时，文本框和提示文本将呈现成红色错误提示样式。
2. 自动完成和建议
在Material Design中，自动完成和建议非常重要。下面是一个示例：
-- -------------------- ---- ------- ---- --------------------- ------------------------ ------ ----------- ------------------ ----------------------------- -- ------ -------------------------- ---------------------------------- ---- ------------------------------ ------ --- --------------- -------- ----------------- ----------- -------------- --- --------------------- --------------- ----------------------- --- --------------------- --------------- ---------------------- --- --------------------- --------------- ----------------------- -----展开代码
CSS文件：
-- -------------------- ---- ------- ------- ------------------------------- ------- ----------------------------------------------- --------- - ------- ---- ------ ------ - ----------------- - -------------- ---- -展开代码
JavaScript 文件：
-- -------------------- ---- ------- ----- ----------- - ------------------------------------------------- ----- ---- - ------------------------------------ ----- ------ - ------------------------------------ --------------------------------------- --------------- - ----- ----------- - --------------------------------------------------------------- ---------- -- -------------- --- --- - ---- ----- ------- ----------------------- --- ------------ - ----------------------------------------- -------------- -- ------------- - -- - ------------------------ - ------------------------- ------------------------ - ----------- - - ---- -- -------------- --- --- - ------ ----- ------- ----------------------- --- ------------ - ----------------------------------------- -------------- -- ------------- - ------------------ - -- - ------------------------ - ------------------------- ------------------------ - ----------- - - --- ------------------------------------- ---------- - ----- ---------- - ------------------ ------------------------------------------------------------ - -- ----------------------------------- --- --- - ---------------- - ------- - ---- - ---------------- - --- - --- -- ------------------ --- -- - --------------- - ---- - ----------- - ----- - ---展开代码
在这个示例中，用户在文本框中输入字符时，在可见的建议列表中进行搜索，并进行相应地过滤和处理。
总结
本篇文章介绍了如何在Material Design中实现文本框控件。我们详细介绍了Material Design中使用的一些设计原则和属性，并提供了一些示例代码来展示如何使你的文本框更具吸引力。通过设计和定制你的文本框，你可以为你的用户带来更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f537a0f6b2d6eab3de704d
