前言
作为前端开发工程师，我们经常使用各种第三方的前端组件库来快速构建我们的项目。今天，我们要介绍的是一个名为 rukit-components 的 npm 包，他提供了一套常用的 UI 组件，非常适合用于构建中小型前端项目。
在本文中，我们将详细介绍如何使用 rukit-components 这个 npm 包。
安装
首先，我们需要使用 npm 来安装 rukit-components。
npm install rukit-components
如果您使用的是 yarn，也可以使用 yarn 来安装。
yarn add rukit-components
使用
在安装完成后，我们需要在我们的项目中引入这个组件库。可以在我们的入口文件中，通过以下方式引入它。
import { Button, Modal } from 'rukit-components';接下来，我们来看一下 Button 组件的使用方法。
-- -------------------- ---- -------
------ - ------ - ---- -------------------
-------- ----- -
------ -
-----
-------------- ---------------
------
--
-以上代码展示了如何在我们的 React 项目中使用 Button 组件。这将在页面上渲染一个带有“Hello, World!”文本的按钮。
API
接下来，我们来详细了解 rukit-components 的一些常用组件的 API。
Button
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| className | string |
- | 自定义 Button 组件的 class |
| danger | boolean |
false | 按钮是否为危险操作 |
| disabled | boolean |
false | 按钮是否为不可用状态 |
| loading | boolean |
false | 按钮是否为 Loading 状态 |
| onClick | (event: MouseEvent) => void |
- | 按钮点击事件的回调函数 |
| size | large, middle, small |
- | 按钮大小 |
| type | primary, dashed, link, text |
primary |
按钮类型 |
| block | boolean |
false | 是否将按钮宽度设置为 100% |
| icon | ReactNode |
- | 按钮图标 |
| dangerText | string |
- | 危险操作时的确认提示信息 |
Modal
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| afterClose | () => void; |
- | Modal 关闭后的回调函数 |
| bodyStyle | CSSProperties |
- | Modal 内容区域的 style |
| cancelText | string |
'取消' | 取消按钮的文本 |
| centered | boolean |
false | 是否垂直居中 |
| closable | boolean |
true | 是否显示右上角的关闭按钮 |
| confirmText | string |
'确定' | 确认按钮的文本 |
| destroyOnClose | boolean |
false | 关闭 Modal 时是否销毁组件 |
| footer | ReactNode |
- | Modal 底部内容 |
| getContainer | () => HTMLElement |
() => document.body |
Modal 渲染的父级容器 |
| mask | boolean |
true | 是否显示遮罩层 |
| maskClosable | boolean |
true | 点击遮罩层是否可以关闭 Modal |
| maskStyle | CSSProperties |
- | 遮罩层的 style |
| onCancel | (event: MouseEvent, reason: 'cancel') => void; |
- | 取消操作的回调函数 |
| onConfirm | (event: MouseEvent, reason: 'confirm') => void; |
- | 确认操作的回调函数 |
| title | ReactNode |
- | Modal 标题 |
| visible | boolean |
false | Modal 是否可见 |
| width | number | string |
520 | Modal 宽度 |
| wrapClassName | string |
- | Modal 最外层容器的 class |
| zIndex | number |
1000 | Modal 的层级 |
示例代码
下面是一个完整的使用 rukit-components 的例子。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----- - ---- -------------------
-------- ----- -
----- --------- ----------- - ----------------
----- --------------- - -- -- -
-----------------
--
----- ---------------- - -- -- -
------------------
--
----- ------------------ - -- -- -
------------------
--
------ -
-----
------- ---------------------------- --------------
------ ----------------- ---------- --------------------------- -------------------------------
-----------------
--------
------
--
-
------ ------- ----以上代码示例了如何使用 rukit-components 的 Modal 组件来实现弹窗提示。当用户点击“打开 Modal”按钮时，弹出一个包含提示文本和“确认”和“取消”按钮的 Modal。当用户点击“确认”按钮时，Modal 将被关闭。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53e13