介绍
@cyber4all/clark-modal 是一个基于 React 的弹窗组件库，提供了丰富的 API 和可定制的样式，可以轻松地在你的项目中使用。这个库支持的功能包括：
- 显示和隐藏弹窗。
- 弹窗的位置和样式可自定义。
- 可以设置弹窗的遮罩层。
- 可以设置弹窗的状态（可见 / 隐藏）。
安装
你可以使用 npm 或者 yarn 安装 @cyber4all/clark-modal。
使用 npm：
npm install @cyber4all/clark-modal --save
使用 yarn：
yarn add @cyber4all/clark-modal
使用
为了使用 @cyber4all/clark-modal，在你的 React 组件中引入 Modal 组件即可。
-- -------------------- ---- -------
------ - ----- - ---- -------------------------
-------- ------------- -
----- --------- ----------- - ----------------
------ -
-----
------- ----------- -- ---------------------- --------------
------ ----------------- ----------- -- -------------------
---------- -----------
------- -- -- ----------
------- ----------- -- ---------------------------------
--------
------
--
-在这个例子中，我们创建了一个 MyComponent 组件，并且在组件内创建了一个按钮和一个 Modal 组件。我们使用 useState 钩子来保存 Modal 的状态（可见 / 隐藏），并且使用 onClick 事件处理程序来显示 Modal。在 Modal 组件中，我们传递了两个属性：visible 和 onClose。visible 属性表示 Modal 的状态，onClose 属性是一个事件处理程序，当用户点击模态框的关闭按钮或者遮罩层时触发。
API
属性
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| visible | Modal 的状态，可见或者隐藏 | boolean | false |
| onClose | Modal 关闭时的事件处理程序 | function | undefined |
| mask | 是否显示遮罩层 | boolean | true |
| position | 弹窗的位置 | 'center' / 'top' / 'right' / 'bottom' / 'left' | 'center' |
| className | 自定义样式的类名 | string | undefined |
| style | 自定义样式 | object | undefined |
事件
| 事件名 | 描述 |
|---|---|
| onClose | 用户关闭 Modal 时触发。 |
示例
自定义样式
你可以使用 className 和 style 属性来自定义 Modal 的样式。
-- -------------------- ---- ------- ------ ----------------- ----------- -- ------------------ -------------------- -------- ------ -------- ---------------- ------- -- - ---------- ----------- ------- -- -- ---------- ------- ----------- -- --------------------------------- --------
隐藏遮罩层
如果你不想要遮罩层，可以将 mask 属性设置为 false。
<Modal visible={visible} onClose={() => setVisible(false)} mask={false}>
<h2>Hello, world!</h2>
<p>This is my modal.</p>
<button onClick={() => setVisible(false)}>Close</button>
</Modal>修改弹窗位置
你可以使用 position 属性来修改 Modal 的位置。
<Modal visible={visible} onClose={() => setVisible(false)} position="top">
<h2>Hello, world!</h2>
<p>This is my modal.</p>
<button onClick={() => setVisible(false)}>Close</button>
</Modal>总结
@cyber4all/clark-modal 是一个非常实用的弹窗组件库，可以节省你开发中的时间。如果你需要在你的项目中使用弹窗，@cyber4all/clark-modal 是一个不错的选择。在使用组件库时，你要注意考虑到组件的 API 和事件，以及如何在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573c581e8991b448e9b98