简介
Onus-Style 是一款专业的前端 UI 库，由 Onus 设计团队精心打造。它可以为项目提供美观、优质的 UI 组件，从而节省项目开发成本。本文将介绍如何使用 onus-style，包括安装、使用、定制化等方面。
安装
npm 安装：
npm install onus-style
CDN 引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onus-style/dist/onus-style.min.css"> <script src="https://cdn.jsdelivr.net/npm/onus-style/dist/onus-style.min.js"></script>
下载包：
使用
在项目中使用 onus-style，需要在 HTML 中引入 CSS 文件和 JS 文件，示例如下：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----------------- ------------
----- -----------------
---- -- ---------- --- -- ---
----- ---------------- ---------------------------------
-------
------
---- ---- ---
---------- ----------------
---
---- -- ---------- -- -- ---
------- ---------------------------------------
-------
-------组件
Button
<button class="onus-btn">按钮</button>
Input
<input class="onus-input" type="text" placeholder="请输入"/>
Checkbox
<label class="onus-checkbox"> <input type="checkbox"/> 复选框 </label>
Radio
<label class="onus-radio"> <input type="radio" name="gender" value="male"/> 男 </label> <label class="onus-radio"> <input type="radio" name="gender" value="female"/> 女 </label>
定制化
在项目中，我们可能需要对 onus-style 进行定制化。Onus-Style 提供了多种变量供我们修改，定制化主要包含两个步骤：
- 修改 SCSS 变量
- 生成自定义 CSS
修改 SCSS 变量
视频图片链接
$onus-primary-color: #007bff;
禁用状态背景颜色
$onus-disabled-bg: #f5f5f5;
字体颜色
$onus-color: #333;
成功状态背景颜色
$onus-success-bg: #ffffff;
失败状态背景颜色
$onus-error-bg: #ffffff;
生成自定义 CSS
使用 SCSS 自定义变量后，我们需要生成自定义的 CSS 文件。这里建议使用 Gulp 工具进行 SCSS 转换为 CSS。具体操作步骤如下：
安装 Gulp
npm install gulp-cli -g npm install gulp -D
新建 gulpfile.js
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - -------------------------------------- ----- ------- - ------------------------ ----- ------ - ---------------------- ----- ----------- - -------------------------------- ----- ----- - - ------- - ---- --------------------- ----- ----------- - -- -------- ------- - ------ -------------------------- ------------------------ --------------- ---------------- --------------------- --------- ----------------------------------- ---------------------------- - -------- ------- - ------------------ ------- - -------- ---- -- ----- ----- ----- ----- --- ---------------------------- ------- ----------------------------------- -------------------- ----------------------------------------- -------------------- - ------------- - ------ ------------- - ------注意：将路径 src/scss/**/*.scss 改为 onus-style 的源代码位置。
执行命令
gulp watch
执行完成后，会生成 dist 目录和文件，其中 dist/css/onus-style.min.css 即为定制后的 onus-style 样式。
总结
本文介绍了 Onus-Style 的安装、使用、组件以及定制化等方面。在实际开发中，使用 Onus-Style 能够提高开发效率，使用定制化能够让 UI 更符合你的需求。感谢对 Onus-Style 的支持，欢迎大家提出宝贵意见和建议！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/206607