简介
maas-gui-vanilla-theme-new 是一个 NPM 包，它提供了一套漂亮的基于 Vanilla JS 的 GUI 主题。使用这个包可以快速构建一些漂亮的 Web 应用程序。
安装
使用 npm 可以非常方便地安装它：
--- ------- --------------------------
使用
我们可以通过引入 CSS 文件，来使用这个包的主题。
------ ----- ---------------- ------------------------------------------------------------- -------
以上是使用它的一种方法。
在深入了解使用它的功能之前，我们需要看一下构建项目的文件结构：
-------- --- ---------- --- --- - --- ------- --- ---- --- ---------
接下来，我们需要创建 HTML，CSS 和 JS 文件来使用 maas-gui-vanilla-theme-new。
HTML
--------- -----
------
------
--------------------------------- ------------
----- ---------------- -------------------------------------------------------------
----- ---------------- ---------------------
-------
------
---- ------------------
------------------------------ ---------
------- -- - ---- --- ------------------------------
------- ------------- ------------------- ---------------
------- ------------- ------------------- ---------------
------- ------------- ------------------- ---------------
------- ------------- ----------------- ---------------
----
----
-- ------------- -----
-----
----
-- ------------- -----
-----
----
-- ------------- -----
-----
-----
------
------- --------------------------
-------
-------CSS
使用它提供的样式：
------- -------------------------------------------------------------
建议你在项目根目录中创建一个 CSS 文件，稍微修改一下样式：
-- ------------- --
---------- -
---------- ------
------- - -----
----------- -------
------------ -----
-
-- -
----------- -----
------- ---- --
-- -
------- - - -----
-
-JavaScript
接下来，我们就是在 JS 文件中根据自己的需求来使用了，这些 JS 功能十分简单：
-- ---------- ------ - ------- - ---- ---------------------------------------- ----- ------------- - -------------------------------------- ----- ------------- - -------------------------------------- ---------------------- ----- -- - ------- --------- ---------------------- ----- -- - ------- ---------
指导意义
通过本教程，我们学会了如何：
- 安装 maas-gui-vanilla-theme-new NPM 包
- 使用该包的样式表来美化 Web 应用程序
- 从 JS 中使用包的功能
这里没有深入了解常规 Vanilla JS，所以推荐您学习 Vanilla JS，以提高您的 JS 技能。
示例代码
你可以在 Github 上找到一个完整的示例代码，该代码使用 maas-gui-vanilla-theme-new 和 Parcel 来构建网站。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562b481e8991b448dff35