npm 包 onus-style 使用教程

简介

Onus-Style 是一款专业的前端 UI 库，由 Onus 设计团队精心打造。它可以为项目提供美观、优质的 UI 组件，从而节省项目开发成本。本文将介绍如何使用 onus-style，包括安装、使用、定制化等方面。

安装

  1. npm 安装：

    --- ------- ----------

  2. CDN 引入：

    ----- ---------------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------

  3. 下载包：

    https://github.com/onusal/onus-style/releases

使用

在项目中使用 onus-style，需要在 HTML 中引入 CSS 文件和 JS 文件，示例如下：

--------- -----
----- -------------
  ------
    ----------------- ------------
    ----- -----------------
    ---- -- ---------- --- -- ---
    ----- ---------------- ---------------------------------
  -------
  ------
    ---- ---- ---
    ---------- ----------------
    ---
    ---- -- ---------- -- -- ---
    ------- ---------------------------------------
  -------
-------

组件

Button

------- ----------------------------

Input

------ ------------------ ----------- -------------------

Checkbox

------ ----------------------
  ------ ----------------- ---
--------

Radio

------ -------------------
  ------ ------------ ------------- -------------- -
--------
------ -------------------
  ------ ------------ ------------- ---------------- -
--------

定制化

在项目中，我们可能需要对 onus-style 进行定制化。Onus-Style 提供了多种变量供我们修改，定制化主要包含两个步骤：

  1. 修改 SCSS 变量
  2. 生成自定义 CSS

修改 SCSS 变量

  • 视频图片链接

    -------------------- --------

  • 禁用状态背景颜色

    ------------------ --------

  • 字体颜色

    ------------ -----

  • 成功状态背景颜色

    ----------------- --------

  • 失败状态背景颜色

    --------------- --------

生成自定义 CSS

使用 SCSS 自定义变量后，我们需要生成自定义的 CSS 文件。这里建议使用 Gulp 工具进行 SCSS 转换为 CSS。具体操作步骤如下：

  1. 安装 Gulp

    --- ------- -------- --
--- ------- ---- --

  2. 新建 gulpfile.js

    ----- ---- - ----------------
----- ---- - --------------------------------------
----- ------- - ------------------------
----- ------ - ----------------------
----- ----------- - --------------------------------

----- ----- - -
  ------- -
    ---- ---------------------
    ----- -----------
  -
--

-------- ------- -
  ------ --------------------------
    ------------------------ ---------------
    ----------------
    --------------------- ---------
    -----------------------------------
    ----------------------------
-

-------- ------- -
  ------------------
    ------- -
      -------- ----
    --
    ----- -----
    ----- -----
  ---
  ---------------------------- -------
  ----------------------------------- --------------------
  ----------------------------------------- --------------------
-

------------- - ------
------------- - ------

    注意：将路径 src/scss/**/*.scss 改为 onus-style 的源代码位置。

  3. 执行命令

    ---- -----

    执行完成后，会生成 dist 目录和文件，其中 dist/css/onus-style.min.css 即为定制后的 onus-style 样式。

总结

本文介绍了 Onus-Style 的安装、使用、组件以及定制化等方面。在实际开发中，使用 Onus-Style 能够提高开发效率，使用定制化能够让 UI 更符合你的需求。感谢对 Onus-Style 的支持，欢迎大家提出宝贵意见和建议！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/206607

阅读全文

猜你喜欢

  • npm 包 el-component 使用教程

    在前端开发中，经常需要使用各种 UI 组件来实现页面的布局和功能。而为了提高效率和代码的可维护性，我们可以使用现有的 UI 组件库。其中，el-component 是一个基于 Element UI 的...

    5 年前
  • npm 包 component-domify 使用教程

    什么是 component-domify？ component-domify 是一个 Node.js 模块，它提供了一种将 HTML 字符串转换为 DOM 元素的方法。

    5 年前
  • npm 包 code42day-in-groups-of 使用教程

    在复杂的前端开发中，经常需要对数据进行分组处理，code42day-in-groups-of 是一款基于 JavaScript 的 npm 包，提供了方便快捷的数据分组方法。

    5 年前
  • NPM包——bounds使用教程

    一、简介 bounds 是一个简单、轻量、易用的库，它提供了一种将一个元素限制在其它元素边界内的方法。这对于弹出框、下拉框等 UI 组件来说非常有用。bounds 最初是为select2输入选择器实现...

    5 年前
  • npm 包 neon-cli 使用教程

    在前端开发中，使用 npm 包来管理和构建项目已经成为了一种普遍的方式。本文将介绍一个非常有用的 npm 包 neon-cli，并详细说明如何使用它来优化前端项目的构建过程。

    5 年前
  • npm包electron-build-env使用教程

    前言：本篇文章主要介绍npm包electron-build-env的使用教程，为开发者提供一种轻松便捷的打包electron应用的方法。 1. electron-build-env简介 electro...

    5 年前
  • npm 包 subindable 使用教程

    在前端开发中，我们常常需要处理一些文本相关的需求，比如搜索实现、字符串处理、文本匹配等。对于这些需求，使用 subindable 是一种非常方便的解决方案。 subindable 是什么 subind...

    5 年前
  • npm 包 poolparty 使用教程

    简介 在前端应用开发中，我们经常需要使用异步的方式去处理一些任务，例如发送数据请求、读取文件等等。而在 Node.js 中，有一个非常优秀的代码库 poolparty，它提供了强大的异步对象池功能。

    5 年前
  • npm 包 mojo-animator 使用教程

    前言 mojo-animator 是一个用于创建动画效果的 npm 包，它基于 WebGL 技术，可以创造高性能的动画效果。本文将介绍如何使用 mojo-animator，首先需要基本的前端 Web ...

    5 年前
  • npm 包 mojo-registered-classes 使用教程

    在前端开发中，经常需要用到类和对象来实现业务逻辑。但是，在大型应用中使用类时，可能会出现类名冲突的问题。而 mojo-registered-classes 包的作用就是帮助我们解决这个问题，它可以让我...

    5 年前
  • npm 包 janitorjs 使用教程

    janitorjs 是一款基于 Node.js 的开源工具，能够帮助前端开发者更好地管理项目中的垃圾代码，提高项目的可维护性和可读性。 安装 安装 janitorjs 很简单，只需要在终端输入以下命令...

    5 年前
  • npm 包 frills 使用教程

    frills 是一款前端自动生成表单的工具，通过该工具用户可以轻松地生成表单、验证表单、自定义表单样式等。本文将为大家详细介绍 frills 的使用方法和相关技术要点。

    5 年前
  • npm 包 hoist 使用教程

    什么是 npm 包 hoist？ 当我们在开发前端应用时，我们通常会在 package.json 文件中指定依赖项。然而，当依赖项的版本不同时，可能会遇到版本冲突的问题。

    5 年前
  • npm 包 memoize 使用教程

    什么是 memoize？ Memoize 是一个 JavaScript 库，它可以根据函数的输入参数缓存函数的输出结果。当使用相同的输入参数调用函数时，它将返回缓存的输出结果，而不执行函数。

    5 年前
  • npm 包 stream-line-wrapper 使用教程

    在前端开发中，我们经常需要对数据进行流处理，例如异步处理和文件上传等。而 Node.js 的 stream 模块是一种高效处理数据的方式。但是在使用 stream 模块时，我们需要处理很多底层细节问题...

    5 年前
  • npm 包 geoip 使用教程

    前置知识 在阅读本教程时，需要有一定的 Node.js 和 npm 的基础知识以及理解 HTTP 和 IP 地址的基本概念。 简介 geoip 是一个 Node.js 模块，用于获取给定 IP 地址的...

    5 年前
  • npm 包 fiddle 使用教程

    前言 在前端开发过程中，我们常常需要快速搭建一个可以运行的项目，比如我们需要展示一个 UI 控件的效果，或者需要测试一些 JavaScript 代码的行为等等。当我们想要快速尝试这些东西的时候，就需要...

    5 年前
  • npm 包 dirmr 使用教程

    介绍 dirmr 是一个基于 Node.js 的 npm 包，它可以将指定目录中的所有文件复制到另一个目录中，并可以根据指定的规则进行文件的重命名。使用 dirmr 可以帮助前端开发者快速复制和重命名...

    5 年前
  • npm 包 tq 使用教程

    引言 npm 是世界上最大的软件库，是前端工程师必不可少的工具之一。在我们的日常前端开发中，我们需要使用很多的库和框架来提高开发效率和代码质量。其中一个强大的 npm 库就是 tq，在本文中，我们将学...

    5 年前
  • npm 包 cstep 使用教程

    在前端开发的过程中，npm 包是一个非常常用的工具，它允许我们在项目中引入各种功能强大的第三方库，来帮助我们构建更好的网站或应用。而 cstep 就是一款非常实用的 npm 包，它可以帮助我们快速地实...

    5 年前

相关推荐

    暂无文章