Superfly CSS Component Button 是一个基于 CSS 和 Sass 的按钮组件库，可以极大地简化前端开发的过程。本篇文章将详细介绍如何使用 Superfly CSS Component Button。
安装
使用 npm 安装 Superfly CSS Component Button：
--- ------- ----------------------------- ------
引入
在 CSS 文件中引入 Superfly CSS Component Button：
------- ----------------------------------------
在 Sass 文件中引入 Superfly CSS Component Button：
------- ----------------------------------------
使用
引入 Superfly CSS Component Button 后，即可在 HTML 文件中使用。
------- -------------------- -----------
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