에서 모달 생성 UI 빌더
구성요소와 함께 모달 UI 빌더 을 사용하여 사용자에 대한 경보 또는 작업 호출을 제공합니다. UI 빌더 시간과 노력을 절약하기 위해 모달과 함께 제공됩니다.
모달이란?
대화 상자라고도 하는 모달은 다른 콘텐츠 창을 오버레이하는 창입니다. 모달은 사용자 경험을 제어합니다. 사용자는 모달이 닫힐 때까지 오버레이된 창과 상호 작용할 수 없습니다. 모달에는 다음과 같은 다양한 유형의 컨텐츠가 포함될 수 있습니다.
- 정적 텍스트
- 동적 텍스트
- 양식
- 이미지
- 단추
UI 빌더 에는 미리 구성된 모달을 사용할 수 있습니다. 구성요소에 모달을 추가할 수 있습니다. 그런 다음 모달의 내용과 화면에 표시되는 방식을 구성합니다. 모달에 이벤트 핸들러를 추가하여 사용자가 선택할 때 작업을 수행합니다. 이 작업은 사용자에게 무언가에 대해 경고하거나 사용자에게 작업을 확인하도록 요청할 수 있습니다. 모달은 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 하는 방법입니다. 예를 들어, 모달은 사용자가 메인 페이지에서 수행 중인 작업을 계속하기 전에 선택을 확인하도록 요청할 수 있습니다.
모달 세부 구조
의 UI 빌더 모달에는 다음이 포함될 수 있습니다.
- 모달 헤더
- 모달 컨텐츠
- 대화 상자 닫기 버튼(모달에서 수행한 작업 없음)
- 하나 이상의 모달 버튼(모달에서 작업을 수행할 수 있음)
모달 유형
에서는 다음 표와 같이 다양한 유형의 모달을 사용할 수 UI 빌더있습니다.
| 모달 유형 | 설명 |
|---|---|
| 경보 | 경보 모달은 구성요소 작업과 관련된 정보를 제공합니다. 예를 들어 사용자가 삭제 버튼을 누르면 삭제 작업을 실행 취소할 수 없음을 사용자에게 알리는 경고 팝업이 표시될 수 있습니다. |
| 확인 | 확인 모달은 사용자에게 구성요소 작업을 확인하도록 요청합니다. 예를 들어 사용자가 삭제 단추를 누르면 사용자는 데이터 삭제를 확인해야 합니다. 기본 및 보조 버튼 레이블 필드에서 확인 옵션(예/취소)을 선택할 수 있습니다. |
| 확인 및 삭제 | 확인 및 파괴 모달은 일반적으로 콘텐츠 삭제 또는 지우기와 관련하여 더 지시적입니다. 사용자에게 작업의 심각성을 알리고 작업을 계속 진행할지 여부를 묻습니다. |
| 사용자 지정 | 사용자 지정 모달은 표준 모달을 사용하여 처리되지 않는 시나리오를 해결합니다. 사용자 지정 모달은 모달의 컨테이너 구성요소로 생각할 수 있습니다. 페이지에서 하는 것처럼 사용자 지정 레이아웃, 구성요소, 이벤트 및 데이터 자원을 추가할 수 있습니다. 사용자 지정 모달은 레이아웃을 사용하여 모달에서 원하는 정보를 완전히 설계할 수 있도록 합니다. 레이아웃은 모달 화면 내에서 정보가 있는 위치도 결정합니다. CSS 스타일시트(CSS) 스타일을 사용하여 모달의 시각적 모양을 변경할 수 있습니다. |
| Iframe | iframe을 사용하여 URL 및 데이터에서 기존 iframe 컨텐츠에서 모달로 컨텐츠를 가져옵니다. |
| 모달 뷰포트 | 클라이언트 스크립트를 사용하여 이벤트 바인딩을 통해 뷰포트 모달에 컨텐츠를 동적으로 전달합니다. |
이벤트 핸들러 및 모달
모달에 이벤트를 노출하여 작업 호출 이벤트를 처리합니다. 예를 들어 기본 작업, 보조 작업 등이 있습니다. 이벤트 처리기를 추가하고 데이터 자원을 호출하여 데이터를 구성합니다. 모달이 있는 구성 요소에 대한 새 이벤트 처리기를 추가하는 것만큼 간단합니다. 또는 모달 자체에 이벤트 핸들러를 추가할 수 있습니다. 구성요소 또는 모달과 연결할 이벤트를 선택하고 추가합니다. 자세한 지침은 을 참조하십시오 구성요소에 모달 추가 .