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 的值。
堆疊對話框
對話框可以堆疊。一個對話框可以開啟另一個對話框，後者會在開啟時出現在前景。關閉後一個對話框會再次顯示前一個對話框。
系統對話框
Toolpad 提供了一組系統對話框，這些對話框改進了原生的 window.alert、window.confirm 和 window.prompt API。這些 API 非常相似，但它們創建的對話框會遵循您的應用程式主題。
Alert
類似於 window.alert，它會開啟一個對話框，向使用者顯示訊息。唯一要採取的動作是確認訊息，之後對話框會關閉。對話框標題和按鈕文字可以使用 title 和 okText 屬性自訂。
Confirm
類似於 window.confirm，它會開啟一個對話框，詢問使用者一個問題。使用者可以確認或取消，對話框結果是一個布林值，當使用者確認時為 true。對話框標題和按鈕文字可以使用 title、okText 和 cancelText 屬性自訂。
Prompt
類似於 window.prompt，它會開啟一個對話框，詢問使用者輸入文字。使用者可以填寫輸入框，並在確認後，由 prompt 呼叫返回的 Promise 將解析為其值。對話框標題和按鈕文字可以使用 title、okText 和 cancelText 屬性自訂。