介绍
随着前端技术的不断发展，越来越多的开发者开始重视组件化开发，为了方便开发人员构建高质量的应用程序，offcourse-ui-components 库于是出现了。本文将介绍该 npm 包的使用教程，希望能为广大前端开发者提供帮助。
安装
可以使用 npm 安装 offcourse-ui-components 包，使用以下命令：
npm install offcourse-ui-components --save
开始使用
在引用 offcourse-ui-components 之前，需要先引入 CSS 文件，可以选择需要的样式或全部都引入：
<link href="node_modules/offcourse-ui-components/dist/offcourse-ui-components.min.css" rel="stylesheet">
引用后即可开始使用 offcourse-ui-components 提供的组件，以按钮组件为例：
<button class="oc-btn">按钮</button>
组件列表
offcourse-ui-components 提供了一些常用的 UI 组件，包括下列组件：
- alert
- button
- button-group
- card
- checkbox
- dropdown
- icon
- input
- list
- modal
- progress
- radio
- select
- spinner
- switch
- tabs
- tag
- textarea
- tooltip
接下来，将以若干组件为例介绍使用方法。
Button 按钮
按钮组件是非常常用的一个组件，offcourse-ui-components 也提供了相应的封装。使用方法如下：
<button class="oc-btn oc-btn-primary">Default</button> <button class="oc-btn oc-btn-large oc-btn-primary">Large</button> <button class="oc-btn oc-btn-rounded oc-btn-primary">Rounded</button>
使用如上代码即可渲染出三个不同样式的按钮。默认情况下，按钮没有边框。添加 .oc-btn-primary 类可以让按钮背景色为主色调。.oc-btn-large 类可以让按钮变大。
Input 输入框
输入框组件可以轻松实现基本的输入框，offcourse-ui-components 提供了相应的封装。使用方法如下：
-- -------------------- ---- ------- ---- ------ ----- --- ------------ ------------ ------ ---------------- ----------- --------------------- ---- ---- ---- --- ----------- ------------- ---- ---------------------- -- --------- ------------- ------ ---------------- ----------- --------------------- ------ ---- ---- ---- ---- --- ----------- ---- ------------- ---- ---------------------- -- --------- ------------- ------ --------------- ------------- ----------- --------------------- ------ ---- ---- ----- ---- --- ------------ ---- ------------- ---- ---------------------- ------ --------------- -------------- ----------- --------------------- -- --------- ----------------- ------
代码中可以看到，输入框可以使用 .oc-input 类来实现样式，也可以与图标组合使用。oc-left-icon 和 oc-right-icon 可以给图标特定的定位，方便美化界面。
Modal 对话框
modal 作为常见的弹窗，也是 offcourse-ui-components 的核心组件之一。 我们可以使用 offcourse-ui-components 进行快速创建一个弹窗。使用方法如下：
-- -------------------- ---- -------
---- ------ ----- ---
------- ------------- --------------- -------------------------- --------------
---- ---------- ----- ------- ----- ------ ---
---- --------------- -------------------- ----------------
---- -------------------------
---- ------------------------
--- --------------------------------- ----------
------
---- ----------------------
---- -- - ---------- ------
------
------
------
--------
-------- ----------- -
------------------------------------------------------------
-
---------代码中，我们使用了 oc-btn-primary 类来渲染一个我们想要弹出 modal 的按钮。将 modal 放入 HTML 页面后，使用 JavaScript 如下代码即可将其弹出：
offcourse.modal.open(document.querySelector('#fullscreen'));这里可能有一些读者会问，modal 是怎么实现的呢？代码如下：
-- -------------------- ---- ------- --------- - --------- ------ ---- -- ----- -- ------ -- ------- -- -------- ----- --------- ----- -------- ------- - ---------------- - ---- -- ----- -- ------- -- ------ -- --------- ------ -------- ------ -------- --- ----------- ------- -- -- ----- -------- --- - ----------------- - ----------- ----- -------------- ---- - ---------------- - -------- ----- -------------- --- ----- ----- - --------------- - ------- -- ---------- ----- ------------ ---- - -------------- - -------- ----- ----------- ------ ----------- ----- - ---------------- - -------- ----- - -------------------- ----------------- - --------- ------ ---- ---- ----- ---- ---------- --------------- ------ ------ ----- ------- ----- ---------- ----- ----------- ----- -------------- -- ----------- ----- ----------- ------------ -
在 CSS 中，我们定义了 modal 的基本样式。我们将其设置为 fixed 属性，盖住整个页面，同时使用了一个在 modal 前的透明层来起到遮罩的作用。在 JavaScript 中，我们调用了 offcourse.modal.open(document.querySelector('#fullscreen')) 函数来弹出 modal。这里我们需要将自己定义的 modal 视图传递给该函数，函数即可将 modal 显示出来。
除了自定义模态视图外，还可以直接使用 offcourse-ui-components 提供的 modal：
<button class="oc-btn oc-btn-primary" onclick="offcourse.modal.alert('Hello World!')">Show Alert</button>该函数可以轻松快速地弹出一个自定义提示框。
结语
offcourse-ui-components 提供了许多非常实用的 UI 组件，使用起来十分方便。本文对组件的使用方法做了详细的介绍，相信大家在日常开发中能够很好地应用。希望大家能够通过该库，构建出更加美观实用的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fad3d1de16d83a67240