简介
metamascara 是一个使用 HTML/CSS 实现的 UI 库。它提供了大量的组件，可以帮助你快速构建出漂亮的 Web 应用。同时，它的使用也很简单。
安装
使用 npm 安装 metamascara：
npm install metamascara --save
之后，在你的代码中引入它：
import * as metamascara from 'metamascara';
或者，你也可以通过 CDN 引入它：
<link rel="stylesheet" href="https://unpkg.com/metamascara/dist/metamascara.css" /> <script src="https://unpkg.com/metamascara/dist/metamascara.js"></script>
使用
基础用法
使用 metamascara 的基础用法非常简单。可以通过下面的代码创建一个按钮：
<button class="m-button">Click me!</button>
metamascara 对应的 CSS 样式将自动应用。
组件
metamascara 提供了许多组件，可以按需引入以使用。最常用的组件是按钮、表单、菜单、选项卡等：
-- -------------------- ---- -------
------- ---------------------- ------------
----- ---------------
------ -------------------------------
------ ------------- ----------- --
-------
--- ---------------
-------------
--------------
----------------
-----
---- --------------
----
------- ------
------- ------
------- ------
-----
-----
------- - ------------
------
-----
------- - ------------
------
-----
------- - ------------
------
------主题
metamascara 提供了多种主题，可以按需引入以使用。可以通过下面的代码引入其中一种主题：
<link rel="stylesheet" href="https://unpkg.com/metamascara/dist/themes/dark.css" />
定制
当然，你也可以通过修改源代码来对 metamascara 进行定制。可以通过下面的命令拷贝源代码到你的项目中：
npm explore metamascara -- npm run copy
拷贝完成后，你就可以开始修改代码了，比如修改颜色、样式等：
-- -------------------- ---- ------- --------- - ----------------- -------- ------- ----- ------ -------- -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- -
结语
通过本文，你已经了解了如何使用 metamascara 搭建 Web 应用，同时还能够将它进行定制。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/95192