Needless UI

컴포넌트

Dialog

네이티브 dialog 요소를 기반으로 한 모달 창으로, 포커스는 브라우저가 관리합니다.

가져오기

import-dialog.ts
import {
  NuiDialog,
  NuiDialogActions,
  NuiDialogClose,
  NuiDialogDescription,
  NuiDialogTitle,
} from '@needless-ui/angular/dialog';

NuiDialog

네이티브 <dialog>를 Needless UI 다이얼로그로 바꿉니다.

셀렉터
dialog[nuiDialog]
내보내기 이름
nuiDialog
이름타입기본값설명
open양방향booleanfalse다이얼로그가 열려 있는지 여부. [(open)]으로 바인딩합니다.
modal입력booleantrue배경을 표시하고 뒤쪽 페이지를 상호작용할 수 없게 한 모달로 엽니다.
dismissible입력booleantrueEsc 키와 배경 클릭으로 다이얼로그를 닫을 수 있는지 여부.
size입력'sm' | 'md' | 'lg''md'최대 너비: sm(24rem), md(32rem), lg(44rem) 중 하나.
enter입력NuiEnter등장하는 방식: zoom, fade, drop, rise, unfold, flip, swing, slide, none 중 하나.
motion입력NuiMotion움직일 때 사용하는 스프링: snappy, bouncy, jelly, elastic, lazy, mechanical, none 중 하나.
spring입력NuiSpring임의의 스프링을 { stiffness, damping, mass } 형식으로 지정하며, 런타임에 CSS로 컴파일됩니다. motion보다 우선합니다.
corners입력NuiCorners모서리 모양: round, squircle, bevel, scoop, notch, square 중 하나.
radius입력NuiRadius모서리 크기: none, small, medium, large, full 중 하나.
density입력NuiDensity차지하는 공간: compact, regular, roomy 중 하나.
closed출력string다이얼로그가 닫힐 때마다 반환 값을 내보냅니다. 아무것도 선택하지 않고 닫힌 경우에는 빈 값입니다.
close메서드(returnValue?: string) => void다이얼로그를 닫습니다. 반환 값을 함께 전달할 수도 있습니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

NuiDialogTitle

다이얼로그의 제목입니다. id가 부여되어 다이얼로그의 aria-labelledby가 됩니다.

셀렉터
[nuiDialogTitle]

NuiDialogDescription

다이얼로그의 aria-describedby가 참조하는 짧은 설명입니다.

셀렉터
[nuiDialogDescription]

NuiDialogActions

다이얼로그 하단에 끝 쪽으로 정렬되는 버튼 행입니다.

셀렉터
[nuiDialogActions]

NuiDialogClose

클릭하면 자신을 감싸는 다이얼로그를 닫습니다.

셀렉터
[nuiDialogClose]
이름타입기본값설명
nuiDialogClose입력string''다이얼로그를 닫을 때 사용할 값으로, (closed)로 내보내집니다.