useDialogs
用于打开和与对话框交互的命令式 API。
Toolpad Core 提供了一组抽象，使与对话框的交互更加简单。它具有用于打开和关闭对话框的命令式 API，并允许对话框彼此堆叠。
您需要做的第一件事是在应用程序的根目录安装 DialogsProvider。
import { DialogsProvider } from '@toolpad/core/useDialogs';
function App({ children }) {
return <DialogsProvider>{children}</DialogsProvider>;
}
要访问对话框 API，您首先必须调用 useDialogs hook。
import { useDialogs } from '@toolpad/core/useDialogs';
function MyApp() {
const dialogs = useDialogs();
// ...
}
基本对话框
对话框是 React 组件，它接受 open 和 onClose 属性并返回一个 Dialog 组件。open 属性反映对话框的打开状态，您可以调用 onClose 处理程序来关闭它。
function MyCustomDialog({ open, onClose }: DialogProps) {
return (
<Dialog fullWidth open={open} onClose={() => onClose()}>
<DialogTitle>Custom dialog</DialogTitle>
<DialogContent>I am a custom dialog</DialogContent>
<DialogActions>
<Button onClick={() => onClose()}>Close me</Button>
</DialogActions>
</Dialog>
);
}
现在您可以调用 dialogs.open 函数并将组件作为第一个参数传递。
使用对话框 payload
您可以使用第二个参数将 payload 传递给对话框。payload 在对话框的生命周期内保持不变。
使用对话框结果
对话框可以使用 onClose 处理程序返回值。open 方法返回的 Promise 将使用传递给 onClose 的值来 resolve。
堆叠对话框
对话框可以堆叠。一个对话框可以打开另一个对话框，后者在打开时会出现在前台。关闭后者会再次显示前者。
系统对话框
Toolpad 附带一组系统对话框，这些对话框改进了原生 window.alert、window.confirm 和 window.prompt API。这些 API 非常相似，但它们创建的对话框遵循您的应用程序主题。
提示框
类似于 window.alert，它打开一个对话框，其中包含给用户的消息。唯一要采取的操作是确认消息，之后对话框关闭。对话框标题和按钮文本可以使用 title 和 okText 属性进行自定义。
确认框
类似于 window.confirm，它打开一个对话框，其中包含给用户的问题。用户可以选择确认或取消，对话框结果是一个布尔值，当用户确认时为 true。对话框标题和按钮文本可以使用 title、okText 和 cancelText 属性进行自定义。
提示输入框
类似于 window.prompt，它打开一个对话框，询问用户一些输入文本。用户可以填写输入框，并在确认后，从 prompt 调用返回的 Promise 将使用其值进行 resolve。对话框标题和按钮文本可以使用 title、okText 和 cancelText 属性进行自定义。