dialog部品 + tailwindcss + Zod, Svelte Component作成

概要

前回の、dialog 要素の続編メモになります

• Svelte 実装になります。
• 検証はZod使う例です。

[ 公開: 2024/05/15]

---

書いたコード

• https://github.com/kuc-arc-f/express_33svelte/tree/main/sample/zod_test

https://github.com/kuc-arc-f/express_33svelte/tree/main/sample/zod_test

---

dialog

• 完了 dialog: components/DialogBox.tsx

https://github.com/kuc-arc-f/express_33svelte/blob/main/sample/zod_test/src/components/DialogBox.svelte

---

• ErrorDialogBox.tsx : エラー用dialog

https://github.com/kuc-arc-f/express_33svelte/blob/main/sample/zod_test/src/components/ErrorDialogBox.svelte

---

• 読み込む画面.svelte

• Zod.svelte

• 保存時: zod検証＞OK時、成功dialog表示

• 検証NG: エラー dialog表示

https://github.com/kuc-arc-f/express_33svelte/blob/main/sample/zod_test/src/client/Zod.svelte

---

---

確認ダイアログ

• OK 押すと、次の関数実行
• cancel : dialog close

---

確認ダイアログ

• OK 押すと、次の関数実行
• cancel : dialog close
• components/ConfirmDialog.svelte

https://github.com/kuc-arc-f/express_33svelte/blob/main/sample/zod_test/src/components/ConfirmDialog.svelte

---

確認ダイアログ、呼び出し

• client/Confirm.svelte

https://github.com/kuc-arc-f/express_33svelte/blob/main/sample/zod_test/src/client/Confirm.svelte

---