介绍
@atlaskit/inline-dialog 是一个 React UI 组件库，这个包可以在你的 React 应用程序中添加带有内联对话框的功能。通过 @atlaskit/inline-dialog，你可以创建自定义对话框，并将其添加到任何需要交互的元素上。
安装
使用 npm 包管理器进行安装：
npm install @atlaskit/inline-dialog --save
引用
在你的项目中，只需简单引用即可使用 @atlaskit/inline-dialog：
import InlineDialog, { InlineDialogInner } from '@atlaskit/inline-dialog';
使用
@atlaskit/inline-dialog 核心是一个高度可定制的 InlineDialog 组件。它需要以下两个属性：
- content: 所需的内容，可以是静态内容或动态生成的内容。
- isOpen: 控制 InlineDialog 是否可见。
以下是一个最简单的示例：
-- -------------------- ---- ------- ------ -------- ---- ------------ ------ - -------- - ---- -------- ------ ------------ ---- -------------------------- -------- ----- - ----- -------- ---------- - ---------------- ------ - ----- ------- ----------- -- -------------------------- --------------- ------------- --------------- ------- --------------- -- ------ -- - -------------------- --- ---------------------------------展开代码
这段代码生成了一个按钮和一个内联对话框，点击按钮可以切换对话框的显示状态。
API
@atlaskit/inline-dialog 组件有默认的样式和一组属性，具体如下：
InlineDialog
InlineDialog 是一个容器元素，可以根据 isOpen 属性呈现或隐藏子元素。
Props：
- isOpen: Boolean - 是否显示内容。
- children：Node - 需要渲染到内联对话框中的内容。
- onContentClick：Function - 当内容被点击时调用的函数。
- placement：String - 对话框的位置。可以是以下任何一种，可选值为 "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", 或 "right-start"。
- testId：String - 用于测试的 ID。
InlineDialogInner
InlineDialogInner 是一个容器元素，用于容纳你的内容，并在需要时重新定位其位置。
Props：
- placement：String - 对话框的位置。可以是以下任何一种，可选值为 "bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", 或 "right-start"。
- testId：String - 用于测试的 ID。
示例
以下示例演示了如何使用 @atlaskit/inline-dialog 组件：
-- -------------------- ---- ------- ------ -------- ---- ------------ ------ - -------- - ---- -------- ------ ------------- - ----------------- - ---- -------------------------- -------- ----- - ----- -------- ---------- - ---------------- ----- ------------------- - - ------------------- ---------------- ------- ----------- -- ----------------------------- -------------------- -- ------ - ----- ------- ----------- -- -------------------------- --------------- ------------- ----------------------------- --------------- ------------------ -- ------ -- - -------------------- --- ---------------------------------展开代码
结论
使用 @atlaskit/inline-dialog 包可以轻松地添加内联对话框到你的 React 应用程序中，并完全定制化你的对话框。无论你是在做一个复杂的企业应用，还是一个简单的个人应用，@atlaskit/inline-dialog 都是一个非常有用的工具。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa89b5cbfe1ea06104ee
