gumga-components 是一个基于 Angular 和 Bootstrap 的 UI 组件库，提供了许多常用的 UI 组件，如按钮、卡片、表格等，简洁易用。本文将详细介绍 gumga-components 的安装和使用。
安装
安装 gumga-components，可以使用命令行工具 npm 或者 yarn：
npm install gumga-components --save
yarn add gumga-components
引入
在使用 gumga-components 的 HTML 文件中引入 css 和 js 文件：
<!-- 引入 CSS --> <link rel="stylesheet" href="node_modules/gumga-components/dist/gumga-components.css"> <!-- 引入 JS --> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/gumga-components/dist/gumga-components.min.js"></script>
除了上面的引入方式，还可以使用 cdn：
<!-- 引入 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gumga-components/dist/gumga-components.css"> <!-- 引入 JS --> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/angular/angular.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gumga-components/dist/gumga-components.min.js"></script>
使用
在引入 gumga-components 后，你就可以在 HTML 文件中使用 gumga-components 提供的各种 UI 组件。
按钮
gumga-components 提供了许多按钮样式，你可以通过不同的类名来使用它们。
-- -------------------- ---- ------- ---- ---- --- ------- ---------- -------------------------- ---- ----- --- ------- ---------- ----------------------------------- ---- ---- --- ------- ---------- ----------- -------------------- ------- ---------- ----------- -------------------- ------- ---------- ----------- -------------------- ------- ---------- ----------- ---------------------
卡片
gumga-components 的卡片组件能够实现以卡片形式展示信息的功能。
-- -------------------- ---- -------
---- ---- ---
---- -------------
---- --------------------
--
------
---- ------------------
-----------
------
------
---- ----- ---
-- -------- -------------
---- --------------------
--
------
---- ------------------
-----------
------
----表格
gumga-components 的表格组件可以实现简单的排序、搜索、分页等功能。
-- -------------------- ---- -------
---- ---- ---
------ --------------
-------
----
----------
--------- ---------
-------- ---------
-----------------
-----
--------
-------
----
--- ------------------
-------------
-------------
-------------
-----
----
--- ------------------
--------------
-----------------
-------------
-----
----
--- ------------------
--------------
------- ---------
-----------------
-----
--------
--------
---- ---- ---
------ ------------ ----------- ------------
-------
----
--- ---------------------------
--- --------------------------------- ---------
--- ------------------------------- ---------
--- ----------------------------------------
-----
--------
-------
----
--- ------------------
-------------
-------------
-------------
-----
----
--- ------------------
--------------
-----------------
-------------
-----
----
--- ------------------
--------------
------- ---------
-----------------
-----
--------
--------
---- ---- ---
---- -------------------
------ ----------- -------------------- ---------------------
------
------ ------------ ----------- --------------
-------
----
----------
--------- ---------
-------- ---------
-----------------
-----
--------
-------
----
--- ------------------
-------------
-------------
-------------
-----
----
--- ------------------
--------------
-----------------
-------------
-----
----
--- ------------------
--------------
------- ---------
-----------------
-----
--------
--------
---- ---- ---
--- -------------------
--- ---------------- ----------
-- ----------------- ---------------------
-----
--- ---------------- --------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- -----------------
-----
-----
------ ------------ ----------- ----------------
-------
----
----------
--------- ---------
-------- ---------
-----------------
-----
--------
-------
----
--- ------------------
-------------
-------------
-------------
-----
----
--- ------------------
--------------
-----------------
-------------
-----
----
--- ------------------
--------------
------- ---------
-----------------
-----
--------
--------结语
本文介绍了 npm 包 gumga-components 的安装和使用。其中，我们演示了如何使用按钮、卡片和表格等 UI 组件。希望这篇文章可以帮助你更好地使用 gumga-components，同时也希望您可以深入了解它的实现原理和更多用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da2c9