npm包 gumga-components 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

gumga-components 是一个基于 Angular 和 Bootstrap 的 UI 组件库，提供了许多常用的 UI 组件，如按钮、卡片、表格等，简洁易用。本文将详细介绍 gumga-components 的安装和使用。

安装

安装 gumga-components，可以使用命令行工具 npm 或者 yarn：

--- ------- ---------------- ------
---- --- ----------------

引入

在使用 gumga-components 的 HTML 文件中引入 css 和 js 文件：

---- -- --- ---
----- ---------------- ---------------------------------------------------------------

---- -- -- ---
------- ------------------------------------------------------
------- ---------------------------------------------------
------- ---------------------------------------------------------------
------- --------------------------------------------------------------------------

除了上面的引入方式，还可以使用 cdn：

---- -- --- ---
----- ---------------- -------------------------------------------------------------------------------

---- -- -- ---
------- ----------------------------------------------------------------------
------- -------------------------------------------------------------------
------- -------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------

使用

在引入 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

阅读全文

猜你喜欢

  • npm 包 json2xlsx-export 使用教程

    前言 json2xlsx-export 是一个基于 Node.js 和 npm 的 npm 包，在前后端数据交互中，将 Json 数组转化为 Excel 文件是非常常见的操作。

    2 年前
  • npm 包 scodi 使用教程

    前言 在开发前端项目的过程中，我们常常需要使用各种工具来提高我们的效率和代码质量。其中，scodi 是一个代码转换工具，它可以将你的 ES6+ 代码转换为向后兼容的 JavaScript 代码，使其能...

    2 年前
  • npm 包 neutrino-middleware-source-map 使用教程

    随着前端技术的不断发展，前端工程化的重要性日益凸显。而在前端工程化的过程中，npm 包扮演了至关重要的角色。本文介绍一个非常有用的 npm 包 - neutrino-middleware-source...

    2 年前
  • npm 包 sz-throttler 使用教程

    在传统的 Web 应用中，JavaScript 的网络请求是单线程的，在并发请求较多的情况下容易导致网络请求阻塞，影响用户体验。针对这种情况，我们可以通过限制请求的发送频率来优化性能。

    2 年前
  • npm 包 self-calc 使用教程

    什么是 self-calc？ self-calc 是一个用于计算用户输入的算术表达式的 npm 包。其特点是支持自定义变量和函数，方便用户自行定制计算规则。该包主要依赖于 math.js 库进行运算。

    2 年前
  • npm 包 @udantha/exception 使用教程

    简介 在前端开发中，经常会遇到代码出现异常的情况，这时候我们需要对异常进行处理，以便及时发现和解决问题。npm 包 @udantha/exception 提供了一个可以对异常进行捕获和处理的方法，使得...

    2 年前
  • npm 包 react-static-hello-world 使用教程

    介绍 react-static-hello-world 是一个轻量级的 React 组件库，它提供了一个简单的“Hello, World!”例子供您快速上手。它基于 create-react-libr...

    2 年前
  • npm 包 verifyr 使用教程

    什么是 verifyr？ verifyr 是一款强大的前端验证库，它提供了一系列的验证规则，可以帮助开发者快速完成表单等用户输入的验证操作。verifyr 可以在浏览器端或者 Node.js 环境下使...

    2 年前
  • npm 包 vue2-timepicker-disabled 使用教程

    介绍 Vue2-timepicker-disabled 是一个 Vue.js 组件，可以帮助开发者快速实现时间选择器的功能。该组件支持禁用无效时间段，并可根据需要进行定制。

    2 年前
  • npm 包 address-book-test 使用教程

    什么是 npm 包 npm 全称为 Node Package Manager，是一个包管理工具，也是一个包仓库，它是 Node.js 平台的默认包管理器。npm 可以帮助开发者在项目中快速安装、管理、...

    2 年前
  • npm 包 @terraeclipse/ready 使用教程

    在前端开发中，我们经常需要等待 DOM 加载完成后再执行相关操作。对于简单的页面，我们可以通过监听 window.onload 事件来实现，但对于大型应用程序，页面的 DOM 结构可能需要加载很久，而...

    2 年前
  • npm 包 npm-r 使用教程

    简介 npm 是一个 Node.js 包管理器，是全球最大的开源软件注册表，通过 npm 可以方便地发布、共享和重用代码。其中，npm-r 是 npm 的一个简单的但强大的命令行工具，它能够帮助前端开...

    2 年前
  • npm包whatdeps使用教程

    前言 在前端开发中，我们经常需要使用很多第三方的npm包，但是随着项目的不断发展和迭代，项目中的npm包也会不断增多。当我们需要更换或卸载某些npm包时，会发现手动检查和解决npm包之间的依赖关系是一...

    2 年前
  • npm 包 whois-parser-prettiefied 使用教程

    在前端开发中，我们常常需要获取域名的 WHOIS 信息，以便更好地了解域名注册人、注册日期、失效日期等基本信息。在这篇文章中，我们将介绍一个 npm 包 —— whois-parser-prettif...

    2 年前
  • npm 包 bayeux 使用教程

    在前端开发中，许多场景需要使用实时通信来实现相应的交互效果，而 bayeux 是一种轻量级的、基于 Comet 的实时通信方案。在本文中，我们将介绍如何使用 npm 包 bayeux 在前端项目中进行...

    2 年前
  • npm包hubot-pull-review使用教程

    什么是hubot-pull-review hubot-pull-review是一款基于Node.js和Hubot框架开发的npm包，它用于自动化Github仓库的Pull Request代码审查过程。

    2 年前
  • npm 包 cordova-plugin-honeywell 使用教程

    前言 在各种现代化的应用程序中，我们常常需要使用扫码仪来扫描二维码或者条形码。而在移动应用程序开发中，使用 Cordova 跑在不同的平台上常常是一个不错的选择。为了方便在 Cordova 中使用 H...

    2 年前
  • npm 包 n3grid 使用教程

    背景介绍 n3grid 是基于 React 的网格组件库，提供了众多可定制的网格展现形式，支持数据分页、排序、搜索等功能，被广泛应用于各类前端项目中。本文将对 n3grid 的使用进行详细介绍，帮助读...

    2 年前
  • npm 包 hubot-review 使用教程

    在日常工作中，我们经常需要进行代码的 Review，而 hubot-review 是一个非常方便的 npm 包，能够帮助我们自动化代码的 Review。 安装 在进行使用之前，我们需要先安装该 npm...

    2 年前
  • npm 包 remark-insert-page-number 使用教程

    在进行文档编辑时，我们通常需要为每一页添加页码。而在 Markdown 中，我们很难直接实现这一功能。在此情况下，npm 包 remark-insert-page-number 可以帮助我们解决这一问...

    2 年前

相关推荐

    暂无文章