프론트엔드/Material UI
Dialog
1005ptr
2022. 11. 25. 13:05
반응형
다이얼로그는 모달 형태로 뜨는 팝업창이다.
다이얼로그 사용 방법은 아래 사이트의 샘플 코드를 통해서 확인하면 된다.
https://mui.com/material-ui/react-dialog/
React Dialog component - Material UI
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
mui.com
내가 구현하고자 했던 부분은
프로그램에서 뜨는 다이얼로그 스타일 표준을 정해서
공통 코드화 하는것이었다.
고려되어야 할 요소
- 빈 공간 클릭이나 esc 키 입력 시 다이얼로그 창이 꺼질지 여부 선택
- 타이틀 변경
- 내용 변경 - 내용 변경은 자유 자재로 가능
- 아이콘 변경
- 버튼 변경 - 다양한 사전 정의 포맷, 사용자 정의 포맷
- 매개변수 전달
- 다국어 처리
기본 템플릿은 confirmation 기능이 있는 예제로 진행
https://mui.com/material-ui/react-dialog/#confirmation-dialogs
React Dialog component - Material UI
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
mui.com
반응형