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, 제목, 설명, 닫기 동작을 조합합니다. Escape, 외부 클릭, focus trap과 복귀 동작을 primitive가 처리합니다.

컴포넌트	속성	타입	기본값	설명
`Dialog`	`open / defaultOpen`	`boolean`	`false`	controlled 또는 초기 uncontrolled 열림 상태입니다.
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	열림 상태가 바뀔 때 호출됩니다.
`Dialog`	`modal`	`boolean`	`true`	배경 상호작용과 focus trap 여부를 결정합니다.
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	버튼이나 링크에 trigger 또는 close 동작을 합성합니다.
`DialogContent`	`showCloseButton`	`boolean`	`true`	우측 상단 기본 닫기 버튼을 표시합니다.
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	Backdrop의 색상, blur, 전환을 별도로 확장합니다.
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	외부 pointer press로 Dialog가 닫히지 않게 합니다.

미리보기

프로필 편집

설치

사용법

API 레퍼런스

접근성