Superfly CSS Component Button 是一个基于 CSS 和 Sass 的按钮组件库，可以极大地简化前端开发的过程。本篇文章将详细介绍如何使用 Superfly CSS Component Button。
安装
使用 npm 安装 Superfly CSS Component Button：
npm install superfly-css-component-button --save
引入
在 CSS 文件中引入 Superfly CSS Component Button：
@import '~superfly-css-component-button/button';
在 Sass 文件中引入 Superfly CSS Component Button：
@import '~superfly-css-component-button/button';
使用
引入 Superfly CSS Component Button 后，即可在 HTML 文件中使用。
<button class="button">Click me</button>
Superfly CSS Component Button 默认提供多个样式，在类名 button 上添加不同的修饰类名即可调用不同样式。
示例代码：
-- -------------------- ---- ------- ------- ------------- --------------------------------- ------- ------------- ------------------------------------- ------- ------------- --------------------------------- ------- ------------- --------------------------------- ------- ------------- ------------------------------- ------- ------------- --------------------------- ------- ------------- -------------------------------- ---------------- ------- ------------- ---------------------------------- ------------------ ------- ------------- -------------------------------- ---------------- ------- ------------- -------------------------------- ---------------- ------- ------------- ------------------------------- --------------- ------- ------------- ----------------------------- ------------- ------- ------------- ----------------------------- ------- ------------- -----------------------------------
指令
.button
基础类，应用于所有按钮。
.button--primary
主样式。
.button--secondary
次要样式。
.button--success
成功样式。
.button--warning
警告样式。
.button--danger
危险样式。
.button--info
信息样式。
.button--outline-primary
主轮廓样式。
.button--outline-secondary
次轮廓样式。
.button--outline-success
成功轮廓样式。
.button--outline-warning
警告轮廓样式。
.button--outline-danger
危险轮廓样式。
.button--outline-info
信息轮廓样式。
.button--ghost
幽灵样式。
.button--disabled
禁用样式。
总结
Superfly CSS Component Button 为前端开发提供了快捷的按钮样式，只用添加不同的修饰类名即可使用不同的样式。希望本文对您有所帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576c81e8991b448d468c