Material Design 是由 Google 在 2014 年推出的全新设计风格,旨在为设计师、开发者提供一套新的视觉语言。其中的文本框是 Material Design 中的一个重要组成部分。
在本文中,我们将探讨 Material Design 文本框的实现方法,并提供详细的代码示例,希望能为前端开发者提供一些指导意义。
1. 文本框的基本样式
Material Design 文本框的样式通常由以下几个部分组成:
- 文字标签(Label):用于标识文本框的用途或提示用户输入内容;
- 输入框(Input):用户输入文本的区域;
- 下划线(Underline):用于突出文本框的区域和边框,和标记输入框是否处于激活状态;
- 悬浮标签(Floating Label):在用户输入时向上移动的标签,可起到提示用户目的的作用;
- 校验信息(Validation Message):用于提示用户输入内容是否符合规范或错误信息。
下面我们来看一下如何使用 CSS 和 HTML 实现这些基本样式。
HTML 代码:
<div class="form-field"> <label for="name-input">姓名</label> <input id="name-input" type="text" /> <div class="underline"></div> <span class="floating-label">姓名</span> <span class="validation-message">请输入您的姓名</span> </div>
CSS 代码:
-- -------------------- ---- ------- ----------- - --------- --------- - ----- - --------- --------- ---- -- ----- -- ---------- ----- ------------ ----- ------ -------- ----------------- ---- ---- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----- - ------------ ----- --------------- ---- ------------- -- ------- ----- -------------- -- -------------- --- ----- -------- ----------------- ------------ -------- ----- ------ ----- ---------- ----- ------------ ----- ------ ----- - ----------- - -------------------- -------- - ----------- - ---------- - ------ ----- - ---------- - --------- --------- ------- -- ----- -- ------- ---- ------ -- ----------------- -------- -------------------- ------ -------------------- ----- --------------------------- --------- - --------------- - --------- --------- ---- ----- ----- -- ---------- ----- ------------ ----- ------ -------- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----------- - ---------- - --------------- - ---------- ------------------ ---------- ----- ------ -------- - ------------------- - --------- --------- ------- ------ ----- -- ---------- ----- ------------ ----- ------ -------- ----------- ------- - ------------- - ------------------- - ----------- -------- -展开代码
2. 文本框的交互效果
实现了基本样式之后,我们还需要为文本框添加交互效果,以提高用户体验。常见的交互效果包括:
- 文本框获得焦点时,标签和下划线变为蓝色;
- 文本框失去焦点后,如果有输入内容,则保持标签和下划线蓝色,否则恢复为灰色;
- 文本框写入和删除文本时,悬浮标签根据输入内容的情况,向上或向下滑动。
下面我们来看一下如何使用 JavaScript 实现这些交互效果。
-- -------------------- ---- ------- ----- ------ - -------------------------------------- -------- -------------------- -- - ------------------------------- - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- --------------------- - ------------------ ------------- ----------------- - ---------- --------------------- - ------- --- ------------------------------ - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- -- -------------- - --------------------- - --- ----------------- - ---------- --------------------- - --- - --- ------------------------------- - -- - ----- ----- - -------------------------------- ----- ------------- - ------------------------- ----------------------------- - ----------- - ------------------ ------------ - --- ---------------------------- - ----------- - ------ - --- ------------------------- - ----------- - --------- - ---------- --- ---展开代码
3. 实现示例
以下是一个完整的 Material Design 文本框示例,包括基本样式和交互效果:
<div class="form-field"> <label for="name-input">姓名</label> <input id="name-input" type="text" required /> <div class="underline"></div> <span class="floating-label">姓名</span> <span class="validation-message">请输入您的姓名</span> </div>
-- -------------------- ---- ------- ----------- - --------- --------- -------------- ----- - ----- - --------- --------- ---- -- ----- -- ---------- ----- ------------ ----- ------ -------- ----------------- ---- ---- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----- - ------------ ----- --------------- ---- ------------- -- ------- ----- -------------- -- -------------- --- ----- -------- ----------------- ------------ -------- ----- ------ ----- ---------- ----- ------------ ----- ------ ----- - ----------- - -------------------- -------- - ----------- - ---------- - ------ ----- - ---------- - --------- --------- ------- -- ----- -- ------- ---- ------ -- ----------------- -------- -------------------- ------ -------------------- ----- --------------------------- --------- - --------------- - --------- --------- ---- ----- ----- -- ---------- ----- ------------ ----- ------ -------- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----------- - ---------- - --------------- - ---------- ----------------- ------------ ---------- ----- ------ -------- - ------------------- - --------- --------- ------- ------ ----- -- ---------- ----- ------------ ----- ------ -------- ----------- ------- - ------------- - ------------------- - ----------- -------- -展开代码
-- -------------------- ---- ------- ----- ------ - -------------------------------------- -------- -------------------- -- - ------------------------------- - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- --------------------- - ------------------ ------------- ----------------- - ---------- --------------------- - ------- --- ------------------------------ - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- -- -------------- - --------------------- - --- ----------------- - ---------- --------------------- - --- - --- ------------------------------- - -- - ----- ----- - -------------------------------- ----- ------------- - ------------------------- ----------------------------- - ----------- - ------------------ ------------ - --- ---------------------------- - ----------- - ------ - --- ------------------------- - ----------- - --------- - ---------- --- ---展开代码
4. 结语
本文介绍了 Material Design 文本框的实现方法,包括基本样式和交互效果。希望通过本文的介绍,能够为前端开发者提供一些指导和参考。除此之外,还需要注意到 Material Design 中还有很多其他的组件和设计元素,如按钮、卡片等等,可以通过官方文档进行深入了解。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6794b396504e4ea9bd953fb3