eschew-materials 是一个基于 Material Design 的前端 UI 组件库，可以用来快速搭建美观的 web 应用界面。本文介绍如何使用 npm 安装 eschew-materials，并展示一些实用的组件和用法。
安装
使用 eschew-materials 需要先安装 Node.js 和 npm。如果你还没有安装，可以查阅相关文档进行安装。安装完成后，在命令行中输入以下命令进行安装：
npm install eschew-materials
等待安装完成后，就可以在项目中使用 eschew-materials 了。
使用
为了方便使用，可以先引入 css 样式文件和 js 脚本文件：
<link rel="stylesheet" href="node_modules/eschew-materials/dist/eschew-materials.min.css"> <script src="node_modules/eschew-materials/dist/eschew-materials.min.js"></script>
然后就可以在页面中使用 eschew-materials 的组件了。下面展示几个实用的组件。
按钮
按钮是非常基础的组件，可以用于触发事件。可以设置各种颜色和大小。
<button class="md-button">Primary Button</button> <button class="md-button md-secondary">Secondary Button</button> <button class="md-button md-accent">Accent Button</button> <button class="md-button md-primary md-small">Small Button</button> <button class="md-button md-primary md-large">Large Button</button> <button class="md-button md-primary md-flat">Flat Button</button>
输入框
输入框可以用来接收用户输入的内容，可以设置提示文字和类型。
<label class="md-input-label">Name:</label> <input class="md-input" type="text" placeholder="Name"> <label class="md-input-label">Password:</label> <input class="md-input" type="password" placeholder="Password"> <label class="md-input-label">Email:</label> <input class="md-input" type="email" placeholder="Email">
列表
列表可以用来展示数据，在 eschew-materials 中有两种列表：带图标的列表和平面列表。
-- -------------------- ---- -------
--- ----------------
--- ---------------------
-- -------------- ---------- -----------------------------
----- ------------------------------- ------------
-----
--- ---------------------
-- -------------- ------------ ---------------------------
----- --------------------------------- -- -----------------------
-----
-----
--- ---------------------
--- ------------------------------ ---- ---- ------
--- ------------------------------ ---- ---- ------
--- ------------------------------ ---- ---- ------
-----选择器
选择器可以用来从一组选项中选取一个或多个选项，可以设置默认选中项和回调函数。
-- -------------------- ---- ------- ------ ----------------- ------ ------------ --------------------- -------- ----- ----------------------------- ----- ----------------------------- -------- -------- ------ ----------------- ------ ------------ ---------------------- ----- ----------------------------- ----- ----------------------------- -------- -------- ------ -------------------- ------ ---------------- ----- -------------------------------- ----- ---------------------------------- -------- -------- ------ -------------------- ------ ---------------- ----- -------------------------------- ----- ---------------------------------- -------- --------
结语
本文介绍了 npm 包 eschew-materials 的使用方法和常用组件，希望能对大家的前端开发工作有所帮助。更多详细信息可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668481e8991b448e2adf