dialog要素 + tailwindcss、完了,確認ダイアログ作成。 Remix 2

概要

前回の、dialog 要素の続編メモになり。Reamix版のメモです。

• テストは stackblitz.com で。確認しました。

[ 公開: 2024/05/19 ]

---

概要

• @remix-run/react: 2.8.1
• tailwindcss

---

書いたコード

• https://github.com/kuc-arc-f/remix47/tree/main/sample/form_test

https://github.com/kuc-arc-f/remix47/tree/main/sample/form_test

---

完了dialog

• Form + action (server action) の、サーバー検証
• メッセージ、閉じるボタンを配置
• components/DialogBox.tsx

https://github.com/kuc-arc-f/remix47/blob/main/sample/form_test/app/components/DialogBox.tsx

---

• ErrorDialogBox.tsx : エラー用dialog

https://github.com/kuc-arc-f/remix47/blob/main/sample/form_test/app/components/ErrorDialogBox.tsx

---

• 読見込む画面tsx

• TestValid3.tsx

• useEffect　内で、action返却の、OK,NG分岐＞　各ダイアログ表示。

https://github.com/kuc-arc-f/remix47/blob/main/sample/form_test/app/routes/TestValid3.tsx

---

確認dialog

• ConfirmDialog.tsx
• OK, cancel　等の選択ボタン部品です。

https://github.com/kuc-arc-f/remix47/blob/main/sample/form_test/app/components/ConfirmDialog.tsx

---

確認dialog, 読み込む.tsx

• Confirm.tsx
• ConfirmDialogに、propsで。OK時の次実行関数を渡します。

https://github.com/kuc-arc-f/remix47/blob/main/sample/form_test/app/routes/Confirm.tsx

---