Material Design 文本框的实现方法

阅读时长 11 分钟读完

Material Design 是由 Google 在 2014 年推出的全新设计风格,旨在为设计师、开发者提供一套新的视觉语言。其中的文本框是 Material Design 中的一个重要组成部分。

在本文中,我们将探讨 Material Design 文本框的实现方法,并提供详细的代码示例,希望能为前端开发者提供一些指导意义。

1. 文本框的基本样式

Material Design 文本框的样式通常由以下几个部分组成:

  • 文字标签(Label):用于标识文本框的用途或提示用户输入内容;
  • 输入框(Input):用户输入文本的区域;
  • 下划线(Underline):用于突出文本框的区域和边框,和标记输入框是否处于激活状态;
  • 悬浮标签(Floating Label):在用户输入时向上移动的标签,可起到提示用户目的的作用;
  • 校验信息(Validation Message):用于提示用户输入内容是否符合规范或错误信息。

下面我们来看一下如何使用 CSS 和 HTML 实现这些基本样式。

HTML 代码:

CSS 代码:

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

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

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

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

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

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

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

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

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

------------- - ------------------- -
  ----------- --------
-
展开代码

2. 文本框的交互效果

实现了基本样式之后,我们还需要为文本框添加交互效果,以提高用户体验。常见的交互效果包括:

  • 文本框获得焦点时,标签和下划线变为蓝色;
  • 文本框失去焦点后,如果有输入内容,则保持标签和下划线蓝色,否则恢复为灰色;
  • 文本框写入和删除文本时,悬浮标签根据输入内容的情况,向上或向下滑动。

下面我们来看一下如何使用 JavaScript 实现这些交互效果。

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

-------------------- -- -
  ------------------------------- - -- -
    ----- ----- - --------------------------------
    ----- --------- - -------------------------
    --------------------- - ------------------ -------------
    ----------------- - ----------
    --------------------- - -------
  ---
  
  ------------------------------ - -- -
    ----- ----- - --------------------------------
    ----- --------- - -------------------------
    -- -------------- -
      --------------------- - ---
      ----------------- - ----------
      --------------------- - ---
    -
  ---
  
  ------------------------------- - -- -
    ----- ----- - --------------------------------
    ----- ------------- - -------------------------
    ----------------------------- - ----------- - ------------------ ------------ - ---
    ---------------------------- - ----------- - ------ - ---
    ------------------------- - ----------- - --------- - ----------
  ---
---
展开代码

3. 实现示例

以下是一个完整的 Material Design 文本框示例,包括基本样式和交互效果:

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

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

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

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

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

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

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

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

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

------------- - ------------------- -
  ----------- --------
-
展开代码
-- -------------------- ---- -------
----- ------ - -------------------------------------- --------

-------------------- -- -
  ------------------------------- - -- -
    ----- ----- - --------------------------------
    ----- --------- - -------------------------
    --------------------- - ------------------ -------------
    ----------------- - ----------
    --------------------- - -------
  ---
  
  ------------------------------ - -- -
    ----- ----- - --------------------------------
    ----- --------- - -------------------------
    -- -------------- -
      --------------------- - ---
      ----------------- - ----------
      --------------------- - ---
    -
  ---
  
  ------------------------------- - -- -
    ----- ----- - --------------------------------
    ----- ------------- - -------------------------
    ----------------------------- - ----------- - ------------------ ------------ - ---
    ---------------------------- - ----------- - ------ - ---
    ------------------------- - ----------- - --------- - ----------
  ---
---
展开代码

4. 结语

本文介绍了 Material Design 文本框的实现方法,包括基本样式和交互效果。希望通过本文的介绍,能够为前端开发者提供一些指导和参考。除此之外,还需要注意到 Material Design 中还有很多其他的组件和设计元素,如按钮、卡片等等,可以通过官方文档进行深入了解。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6794b396504e4ea9bd953fb3

纠错
反馈

纠错反馈