Dialog

モーダルダイアログ。

画面中央に出るモーダルです。横から出したいときは Sheet、軽い吹き出しなら Popover を使ってください。

export const client = "only";

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>エクスポート</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>CSV をエクスポート</DialogTitle>
          <DialogDescription>
            いま適用しているフィルタの結果だけが出力されます。
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>キャンセル</DialogClose>
          <Button>ダウンロード</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  DialogOverlay,
  DialogPortal,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Dialog`	状態。`open` / `defaultOpen` / `onOpenChange`
`DialogTrigger`	開くきっかけ。`render` でボタンにする
`DialogContent`	本体。`showCloseButton`（既定 `true`）で右上の × を出し分ける
`DialogHeader` / `DialogTitle` / `DialogDescription`	見出し
`DialogFooter`	ボタン行。`showCloseButton` で閉じるボタンを足せる
`DialogClose`	閉じるトリガー

DialogTitle は支援技術のために必須です。見出しを見せたくない場合も、置いた上で className="sr-only" にしてください。

トリガー無しで開く

フォーム送信後などプログラムから開く場合は、open を自分で持ちます。

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>…</DialogContent>
</Dialog>;