前言
在前端开发中，UI 组件的可读性和可维护性是非常重要的。使用现成的 CSS 组件库可以提高我们的开发效率。本文将介绍一个非常实用的 npm 包 indy-button-css，它提供了一套非常简洁、易用的按钮组件。
安装
使用 npm 命令即可安装 indy-button-css：
npm install indy-button-css
使用
使用 indy-button-css 的方法非常简单，只需要引入它的 CSS 文件，然后在 HTML 中使用相应的 class 就可以了。以下是一个基本的例子：
<head> <link rel="stylesheet" href="./node_modules/indy-button-css/dist/index.css"> </head> <body> <button class="indy-btn">Default Button</button> <button class="indy-btn indy-btn-primary">Primary Button</button> <button class="indy-btn indy-btn-danger">Danger Button</button> </body>
上面的代码中，我们引入了该组件库的 CSS 样式，并使用 indy-btn、indy-btn-primary 和 indy-btn-danger 这三个 class 来渲染不同的按钮效果。
深入理解
indy-button-css 的样式非常简单，这里讲几个主要的 class：
- .indy-btn：基础样式，所有按钮都共用的样式；
- .indy-btn-primary：主要按钮的样式，使用了醒目的颜色；
- .indy-btn-danger：危险按钮的样式，使用了红色。
该组件库的按钮样式不但简单易用，而且还支持一些交互效果，比如在 hover 和 active 状态下的样式有所变化。值得一提的是，该库的样式代码很少，且结构清晰，非常适合初学者学习。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ----------
----- ---------------- -----------------------------------------------------
-------
---- -
-------- -----
----------- -------
-
--------
-------
------
-------------
------- ------------------------ ---------------
------- --------------- ------------------------- ---------------
------- --------------- ----------------------- ---------------
-------
-------总结
indy-button-css 是一个非常实用的组件库，可以帮助我们更快速地构建界面。通过本文的介绍，我们了解了如何安装和使用该组件库，并深入理解了它的样式代码，希望对大家能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2288