모달을 여는 단추 만들기

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 소요 시간: 1분

    • 데모 환경을 만들고 빈 페이지를 추가한 후 필요에 따라 페이지 변형을 편집할 수 있습니다. 이 데모를 위해 버튼과 모달을 만들고 모달을 여는 버튼을 구성할 수 있습니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 데모 경험을 위한 UI 빌더 페이지를 엽니다.
      그림 1. UI 빌더 시각적 편집기
      UI 빌더 비주얼 편집기.
    2. 스테이지에서 + 콘텐츠 추가 버튼을 클릭하여 툴박스를 엽니다.
    3. 단일 열 레이아웃을 선택합니다.
    4. 그런 다음 열에서 + 아이콘을 클릭하여 도구 상자를 엽니다.
    5. 버튼 구성요소를 선택하여 스테이지에 추가합니다.
      그림 2. 단추 추가
      버튼 구성요소를 가리키는 화살표가 있는 구성요소 탭입니다.
      주:
      구성요소를 선택하면 페이지 구성 창에 호환되는 페이지에서 구성요소를 자동으로 구성하는 데 사용할 수 있는 몇 가지 사전 설정이 포함됩니다. 그러나 이 연습에서는 구성요소를 수동으로 구성할 것입니다. 사전 설정에 대한 자세한 내용은 을 참조하십시오 구성요소를 사용하여 페이지 사용자 지정 UI 빌더.
    6. Page configuration(페이지 구성) 창에서 Configure the component manually(수동으로 구성 요소 구성)를 선택합니다.
    7. 페이지 콘텐츠 창에서 버튼 1 을 선택하고, 구성 창에서 버튼 레이블을 모달 열기로 변경합니다.
    8. 저장을 선택합니다.
    9. 페이지 콘텐츠 창에서 모달 옆에 있는 더하기 아이콘을 클릭하고 경보 모달을 선택합니다.
      그림 3. 경보 모달 추가
      경보 모달이 선택된 모달 패널.
    10. 저장을 선택합니다.
    11. Page contents(페이지 콘텐츠) 창에서 Button 1(버튼 1 )을 선택하고 Configuration(구성) 창에서 Events(이벤트 ) 탭을 선택합니다.
    12. + 이벤트 처리기 추가를 선택하고, 상속된 이벤트 처리기에서모달 대화 상자 열기 또는 닫기를 선택합니다.
      그림 4. 모달 구성 표시/숨기기
      모달 구성을 표시하거나 숨깁니다.
    13. 모달 열기 대화 상자를 활성화하고, 모달 필드에서 경보 1을 선택하고, 추가를 선택합니다.
    14. 저장을 선택합니다.
    15. 미리 보기를 선택합니다.
    16. 미리 보기가 열리면 모달 열기를 선택합니다.
      정의한 모달이 열립니다.
      그림 5. 버튼이 있는 모달 열기
      버튼으로 모달을 엽니다.
    17. 모달에서 확인을 선택한 다음, 브라우저 뒤로 단추를 선택하여 환경 기본 화면으로 돌아갑니다.

    다음에 수행할 작업

    다음 주제 링크를 선택하여 템플릿을 사용하여 페이지를 만드는 방법을 알아봅니다.