npm 包 pegakit-buttons 使用教程

介绍

pegakit-buttons 是一个基于 CSS 和 JavaScript 的 UI 组件库，提供了多种样式的按钮，方便开发者快速构建 Web 应用。pegakit-buttons 可以通过 npm 包管理工具安装，使用简单、灵活。

安装

使用 npm 安装 pegakit-buttons：

npm install pegakit-buttons

使用

在 HTML 文件中引入样式表和 JavaScript 文件：

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

在 JavaScript 文件中使用：

import 'pegakit-buttons';

const btn = document.querySelector('.p-button');
btn.addEventListener('click', () => {
  console.log('Button clicked');
});

样式

pegakit-buttons 提供了多种样式的按钮，可以通过添加类名来进行切换，如下所示：

<button class="p-button">Default</button>
<button class="p-button p-outline-button">Outline</button>
<button class="p-button p-primary-button">Primary</button>
<button class="p-button p-secondary-button">Secondary</button>
<button class="p-button p-ghost-button">Ghost</button>
<button class="p-button p-link-button">Link</button>

按钮样式可以通过配置 CSS 变量来调整，例如：

.p-button {
  --p-button-background-color: #4CAF50;
  --p-button-color: #fff;
}

按钮状态

pegakit-buttons 提供了多种按钮状态，例如禁用状态、载入状态等，可以通过添加类名来进行切换。例如：

<button class="p-button" disabled>Disabled</button>
<button class="p-button p-loading-button" disabled>Loading</button>

事件

pegakit-buttons 提供了 click 事件。可以通过 JavaScript 来监听：

const btn = document.querySelector('.p-button');
btn.addEventListener('click', () => {
  console.log('Button clicked');
});

总结

通过本文的介绍，我们可以知道如何使用 npm 包管理工具安装 pegakit-buttons，并通过添加类名来配置不同样式的按钮，使用不同类名来切换不同状态，添加 JavaScript 事件来监听按钮的点击。祝大家使用愉快！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554c81e8991b448d2811