8.2. Modal
提案 (此规则针对 aPaaS 项目)受新的 Hzero 弹框规范规定影响,ModalProvider
的 getContainer
属性必须传入 Hzero 标签容器的 Element
,否则弹框会被挂到 body
节点上。
因此,为了完美实现 Tab 内弹框,aPaaS 项目在 apaas 包统一封装了 LowcodeModalProvider
组件。
提示
LowcodeModalProvider
使用方式与普通的 ModalProvider
一致。
C7N
组件提供了 useModal
钩子(获取 Modal 实例, 配合 ModalProvider
使用时可以传递上下文),对于打开一个包含 Context 数据传递的弹框的操作,应当使用 useModal
返回的 modal 实例
,调用该实例上的 open
方法。例:
import { Button, Form, useModal } from 'choerodon-ui/pro';
const App = () => {
const modal = useModal();
const handleOpenModal = React.useCallback(() =>
modal.open({
children: (
<Form /> // Form will get context
),
}), [modal]);
return <Button onClick={handleOpenModal}>Open Modal</Button>
}
此篇维护者: