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