다이얼로그

다이얼로그 (Dialog)

다이얼로그는 기본 창이나 다른 다이얼로그 위에 겹쳐 보여주는 창이에요. 그 아래 콘텐츠는 비활성(inert) 상태로 만들어서 사용자가 뒤의 내용을 건드리지 못하게 해요. 프로필 수정, 삭제 확인처럼 집중이 필요한 작업에 딱 맞죠.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add dialog

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-dialog

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

예시

Custom close button (커스텀 닫기 버튼)

Notes (참고)

Context Menu나 Dropdown Menu 안에서 Dialog 컴포넌트를 열려면, Context Menu나 Dropdown Menu 컴포넌트를 Dialog 컴포넌트 안에 감싸줘야 해요. 자세한 내용은 관련 이슈 여기에서 확인할 수 있어요.

<Dialog>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Open</ContextMenuItem>
      <ContextMenuItem>Download</ContextMenuItem>
      <DialogTrigger asChild>
        <ContextMenuItem>
          <span>Delete</span>
        </ContextMenuItem>
      </DialogTrigger>
    </ContextMenuContent>
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Are you sure you want to permanently
        delete this file from our servers?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

더 알아보기 (Learn more)

  • Radix UI Dialog — 다이얼로그의 기반이 되는 Radix UI 프리미티브 문서예요.