AlertDialog , shadcn/ui components例

概要

• shadcn/ui , AlertDialog 実装例になります。

• まとめの関連は、下記になります。

• https://knakatech-blog.pages.dev/books/12

---

関連

• https://ui.shadcn.com/docs/components/alert-dialog

---

• src/client/AlertDialog.tsx
• https://github.com/kuc-arc-f/express_49preact/blob/main/src/client/AlertDialog.tsx

<AlertDialog>
    <AlertDialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
    <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
        </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>

---

• AlertDialogTrigger を使わない方法。
• AlertDialog/TestDialog1.tsx
• open、onOpenChange　属性 を使用。
• button click イベントで発火します。

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  //
  const okFunc = function(){
    alert("okFunc");
    handleClose();
  }
  //
  return (
    <div className="App">
      <span>none AlertDialogTrigger</span><br />
      {/* トリガーボタン */}
      <button onClick={handleOpen} className="px-4 py-2 bg-blue-500 text-white rounded">
        Open Alert Dialog
      </button>

      {/* アラートダイアログ */}
      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
        <AlertDialogContent>
          <AlertDialogTitle>警告</AlertDialogTitle>
          <AlertDialogDescription>
            この操作を実行すると元に戻せません。本当に続行しますか？
          </AlertDialogDescription>
          <div className="flex justify-end space-x-2">
            <AlertDialogCancel asChild>
              <button onClick={handleClose} className="px-4 py-2 bg-gray-200 rounded">
                キャンセル
              </button>
            </AlertDialogCancel>
            {/*
            <AlertDialogAction asChild>
              <button onClick={okFunc} className="px-4 py-2 bg-red-500 text-white rounded">
                確認
              </button>
            </AlertDialogAction>
            */}
          </div>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}