如果你正在开发一个前端项目并需要添加按钮元素来增强用户体验，那么@pegakit/atoms-buttons 是一个值得尝试的 npm 包。它提供了一组简洁、易于使用和高度可定制的按钮样式。本篇文章将向你介绍如何使用这个 npm 包。
安装
你可以利用 NPM 或 yarn 直接安装 @pegakit/atoms-buttons：
npm install @pegakit/atoms-buttons
或
yarn add @pegakit/atoms-buttons
使用
安装完成后，你可以在你的项目中导入需要的组件并将它们添加到你的代码中。
首先我们需要在合适的位置引入样式：
import '@pegakit/atoms-buttons/dist/css/buttons.css';
现在你可以在你的代码中使用其中的任何按钮了。这里我们以 'primary' 按钮为例：
<button class="btn-primary">Primary Button</button>
上述代码会编译成一个带样式的 Primary Button 按钮，该按钮颜色鲜艳并具有鼠标悬停和按下效果。
你可以根据你的需要选择适当的按钮类型，包括 btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger 和 btn-link 等多种类型。
除了这些按钮样式，@pegakit/atoms-buttons 还提供了一个 configurable mixin 来帮助你使用Sass中的变量自定义按钮，完全支持 webpack 等构建工具。
自定义按钮
-- -------------------- ---- -------
------- -------------------------------------------
--------------- -----
------------------- -----
-------------- --------
----------------- --------
----------------------- --------
------- -
-------- -------------
---------------- --------
------------ --- ----- --------
--------------- ---------------
------------------- -------------------
-------------- --------------
----------------- -----------------
-------------------- --------------
----------------------- -----------------------
--------------------- --------------
------------------------ ----------------
--
-在上面的代码中，你可以使用 Sass 变量在 $btn-font-size, $btn-border-radius, $btn-title-bg, $btn-title-color 和 $btn-title-hover-color 等方面自定义你的按钮。
然后在你的 HTML 中使用你自己的按钮样式：
<button class="my-btn">My Button</button>
这时，你将得到一个完全符合你需求的定制化按钮。
其他应用
@pegakit/atoms-buttons 不仅提供了丰富的按钮样式，还能够为各种应用和场景提供支持。例如，你可以向react应用中添加Button组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------------------------------------------
------ ----------------------------------------------
----- -------- ------- --------------- -
-------- -
------ -
------- ----------------- ---------------
-
-
-
------ ------- ---------@pegakit/atoms-buttons 提供了易于使用和高度可定制的按钮，同时也支持自定义样式，这些功能使其非常适合前端开发，特别是在快速原型开发和UI设计方面。它还能为各种应用和场景提供支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557eb81e8991b448d4fc8