前言
随着前端应用程序的开发和网页设计的不断推进，Material Design 成为了广受欢迎的 UI 设计风格。由 Google 推出的 Material Design 以平面化、鲜艳、友好、自然等特性，为设计师和开发者们提供了一套完整的 UI 设计规范。为了更方便的开发遵循 Material Design 的应用程序，我们可以使用 @svogv/material npm 包来快速搭建出 Material Design 风格的应用程序。
安装
首先我们需要安装这个包：
--- ------- --------------- ------
使用方法
导入样式
在 HTML 文件头部引入样式文件：
--------- -----
------
------
----- ----------------
----- --------------------------------------------------------------
-----------------
----- -----------------------------------------------------------------------------------
---------------- --
--------------- ----------
-------
------
---
-------
-------导入 JavaScript 文件
接着在 script 中加入以下代码：
------- ------------------------------------------------------------------------------------------
使用组件
Button
按钮组件是每个 Material Design 应用中最重要的组件之一，以下是一个简单的 Button 组件示例：
------- ----------------- ------------- ------------------ -------------------- --------------------- ----- -- ---------
这是一个基本的 button 组件。mdl-button 是主类，通过 mdl-js-button 支持鼠标点击效果，mdl-button--raised 表示高出一些，我们也可以使用 mdl-button--fab 显示圆形按钮，使用 mdl-button--mini-fab 可以显示小圆形按钮。
Checkbox
Checkbox 组件的效果很明显，它是一个对号与否的选择框。以下是示例代码：
------ ------------------- --------------- --------------------- ----------------- ------ --------------- --------------- ---------------------------- ----- ------------------------------------------- --------
mdl-checkbox__input 是组件的核心部分，将它与 label 绑定即可生成 Checkbox。
Radio Button
Radio Button 与 Checkbox 很相似，也是一种选择框。以下是一段 Radio Button 组件的示例代码：
------ ---------------- ------------ --------------------- --------------- ------ ------------ ------------- ------------------------- -------------- --------- -------- ----- ------------------------------- -------- --------
与 Checkbox 不同的是，Radio Button 一般存在多个相互关联的选项，将它们的 name 属性标记为相同的即可实现 Radio Button 的相互选择功能。
Text Field
Text Field 是 Material Design 中一个非常常用的组件，可以用来输入文本以及密码。以下是一段 Text Field 组件的示例代码：
---- -------------------- ------------------ ------ ---------------------------- ----------- ------------- ------ ---------------------------- ----------------------------- ------
Card
Card 是 Material Design 中一种能够容纳大量信息的组件，可以用来展示新闻、博客、图片等内容。以下是一个简单的 Card 组件示例代码：
---- --------------- -----------------
---- ------------------------
--- -----------------------------------------
------
---- ----------------------------------
----- ------
------
---- ------------------------ ------------------
-- ----------------- ------------------- ------------- ----------------------
--- -------
----
------
------结束语
在使用 Material Design 作为 UI 设计风格时，@svogv/material 这个 npm 包非常有用，它在开发过程中可以极大的提高我们的效率。本文介绍了如何安装、使用以及一些组件的示例代码，希望可以对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056bd781e8991b448e57a2