Vue.js 实现 Material Design 风格的表单控件

阅读时长 12 分钟读完

Material Design 是 Google 推出的一种新的视觉设计语言,致力于创造出干净、简单且直观的用户体验。在前端开发中,如何高效、简单地实现 Material Design 风格的表单控件呢?Vue.js 可以帮你实现这个目标。

Vue.js 简介

Vue.js 是一个轻量级、高效、灵活以及渐进性的 JavaScript 框架,用于构建用户界面。Vue.js 的核心库只关注视图层,通过简单的 API 可以实现组件化、模块化、路由管理、状态管理等功能。

Material Design 风格的表单控件

Material Design 风格的表单控件具备清晰明了、色彩丰富、直观易用等特点。本文将介绍如何通过 Vue.js 实现这种风格的表单控件。

1. 文本框

文本框是表单控件的基础。在 Material Design 风格中,文本框具有鲜明的圆角、浅色底色、悬浮标签和数个状态:

  • 正常状态
  • 激活状态
  • 普通错误状态
  • 严重错误状态

示例代码:

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

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

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

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

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

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

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

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

2. 单选框和复选框

在 Material Design 风格中,单选框和复选框的圆角都是四分之一。针对不同状态,单选框和复选框可渲染选中、未选中和禁用三种状态。

示例代码:

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

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

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

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

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

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

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

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

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

3. 下拉框

在 Material Design 风格中,下拉框与普通文本框类似,同样具有悬浮标签、圆角和水波纹效果,下拉框还具有箭头展开和收缩的样式。

示例代码:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结论

通过 Vue.js,我们可以较为简单地实现 Material Design 风格的表单控件,并能够对其进行定制化和扩展。对于前端开发来说,Vue.js 是一个轻量、优秀的框架,它不仅可以提升前端开发的效率,也能够帮助开发者创造出更佳优秀的用户体验。

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

纠错
反馈