nuiDialog 디렉티브는 네이티브 <dialog>를 Needless UI 다이얼로그로 바꿉니다. 모달 동작은 브라우저가 제공합니다. 뒤쪽 페이지는 상호작용할 수 없게 되고 포커스는 다이얼로그 안에 머물며, Esc 키로 닫을 수 있고 닫히면 포커스가 다이얼로그를 연 요소로 돌아갑니다.
[(open)]을 시그널에 바인딩하고 닫기 버튼에 nuiDialogClose="…" 형식으로 값을 지정하면, 다이얼로그가 어떻게 닫혔는지 알 수 있습니다.
확인 다이얼로그
파괴적인 작업을 확인하는 다이얼로그입니다. 안전한 선택지에 autofocus가 있고, 선택된 값은 (closed)를 통해 전달됩니다.
다이얼로그 안의 폼
다이얼로그에는 어떤 콘텐츠든 담을 수 있습니다. 이 예제에서는 다이얼로그가 열리면 첫 번째 필드가 포커스를 받습니다.
임의로 닫을 수 없는 다이얼로그
[dismissible]="false"를 지정하면 Esc 키와 배경 클릭이 무시되므로, 사용자는 선택지 중 하나를 골라야 합니다.
등장 효과
각 버튼은 같은 다이얼로그를 서로 다른 enter 프리셋으로 열며, 스프링은 모두 bouncy입니다. 어떤 방식으로 등장하든 닫힐 때는 빠르게 페이드아웃됩니다.