Dialog

現在のページ上で、一時的に集中して行う作業に使います。

プレビュー

プロフィールの編集

名前とユーザー名の入力を開き、キャンセルまたは例示用の保存ボタンで閉じます。

開いて focus trap と Escape で閉じる動作を確認できます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/dialog

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

プロフィールの編集

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dialog @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

使い方

Dialog 内に DialogTrigger と DialogContent を置き、タイトルと説明を提供します。キャンセルには DialogClose を使い、主な操作はアプリの処理に接続します。

"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Project details</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Team workspace</DialogTitle>
          <DialogDescription>Manage your projects in one place.</DialogDescription>
        </DialogHeader>
        <DialogFooter><DialogClose render={<Button />}>Close</DialogClose></DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API リファレンス

Base UI Dialog を基盤に Portal、Backdrop、Popup、title、description、close action を組み合わせます。primitive が Escape、外側の click、focus trap、focus restoration を処理します。

コンポーネント	プロパティ	型	デフォルト	説明
`Dialog`	`open / defaultOpen`	`boolean`	`false`	制御された open 状態、または非制御時の初期 open 状態です。
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	open 状態が変わったときに呼び出されます。
`Dialog`	`modal`	`boolean`	`true`	背景とのインタラクションと focus trap の動作を決定します。
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	button または link に trigger／close の動作を合成します。
`DialogContent`	`showCloseButton`	`boolean`	`true`	右上に既定の close button を表示します。
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	Backdrop の色、blur、transition を個別に拡張します。
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	外側で pointer press しても Dialog が閉じないようにします。

プレビュー

プロフィールの編集

インストール

使い方

API リファレンス

アクセシビリティ