Quick App에서 서랍 요소 사용자 지정

서랍 요소 정보

서랍 요소는 앱에서 서랍을 열고 닫는 효과를 만들 수 있는 특수 팝업 패널입니다. 이 요소에는 다음과 같은 기능이 있습니다.

화면 양쪽에 표시할 수 있습니다.

너비를 사용자 정의할 수 있습니다.

사용자가 탭하여 서랍을 닫을 수 있는 마스크 레이어가 있습니다.

화면을 스와이프하여 열 수 있습니다.

서랍 요소는 컨트롤과 콘텐츠의 두 부분으로 구성됩니다. 대부분의 경우 컨트롤은 실제 핸들로 볼 수 있는 버튼이나 아이콘과 같은 클릭 가능한 요소인 반면 콘텐츠는 서랍 안에 있는 것을 나타냅니다. 컨트롤을 탭하여 콘텐츠를 확장하거나 축소할 수 있습니다. 따라서 서랍 요소를 사용하면 다음과 같이 페이지 레이아웃을 디자인할 수 있습니다.

<div class=“page">
    <div class=“controls">
      <image></image>
     </div>
    <stack class=“drawer_container”>
        <div class=“page_content”>
           …
        </div>
         <drawer class="drawer">
            <div class=“content”>
             …
             </div>
          </drawer >
    </stack>
 </div>

개발 절차

서랍 요소는 빠른 앱의 기존 요소를 사용하여 구현할 수 없는 확장 기능입니다. 맞춤 요소가 필요합니다.

하위 요소 사용자 지정

보편적으로 사용할 수 있는 드로어의 모양과 달리 드로어의 콘텐츠 레이아웃은 다양할 수 있으므로 하드코딩할 수 없습니다. 그렇지 않으면 콘텐츠 UI의 일부가 변경되면 하위 요소를 수정해야 하며 이는 프로그래밍의 개방-폐쇄 원칙을 위반합니다.
따라서 drawer.ux 파일에서 슬롯 요소는 상위 요소에 정의된 콘텐츠를 포함하는 데 사용되며 서랍 요소는 콘텐츠의 레이아웃을 정의하는 데 사용됩니다. 코드는 다음과 같습니다.

하위 요소의 속성 및 지원되는 이벤트 사용자 지정

지원되는 속성



지원되는 이벤트

서랍 개폐 애니메이션 디자인

기본적으로 서랍을 숨기려면 표시를 없음으로 설정합니다.

X 좌표를 변경하여 서랍 열기 및 닫기 애니메이션을 제어합니다. 서랍을 열면 보이는 영역으로 이동하고, 닫으면 화면 밖으로 이동합니다. 서랍이 열렸는지 닫혔는지에 관계없이 애니메이션 효과가 부드럽습니다.

div 요소의 flex-direction을 통해 서랍의 표시된 위치를 제어합니다. 드로어를 왼쪽이나 오른쪽에 표시하려면 그에 따라 값을 행 또는 행 반전으로 설정하십시오.

그림 1: 왼쪽 서랍을 열고 닫는 스타일



그림 2: 오른쪽 서랍을 열고 닫는 스타일



그림 3: 왼쪽 서랍을 열고 닫는 코드



그림 4: 오른쪽 서랍을 열고 닫는 코드

마스크 레이어 디자인

마스크 레이어는 기본적으로 숨겨져 있습니다. 즉, display 값은 none입니다. 서랍이 열리면 마스크 레이어가 표시되고 서랍이 닫히면 숨겨집니다.

상위 요소와 하위 요소 간의 데이터 통신 구현

부모 요소는 parentVm.$broadcast()를 통해 서랍을 열고 닫는 이벤트를 하위 요소로 전달합니다. 하위 요소는 $on()을 통해 이벤트 및 매개변수를 수신합니다.

하위 요소는 올바른 위치에 서랍을 표시하여 CSS 스타일을 수정하기 위해 $watch()를 통해 모드가 어떻게 변경되는지 수신합니다.

하위 요소는 drawerchange 이벤트 및 반환된 매개변수를 통해 상위 요소에 알립니다.

스와이프하여 서랍 열기

touchstart 및 touchend 이벤트를 수신하면 화면 가장자리를 스와이프하여 서랍을 열 수 있습니다.

요약

이 문서에서는 다음 방법을 알아봅니다.

속성 및 지원되는 이벤트를 포함하여 하위 요소를 사용자 정의합니다.

상위 요소와 하위 요소 간의 데이터 통신을 구현합니다.

시작 및 종료 애니메이션을 디자인합니다.

마스크 레이어를 디자인합니다.

자세한 내용은 related documents에서 확인할 수 있습니다.

샘플 코드 — drawer.ux