RxDrawer

현재 화면의 맥락을 유지하면서 가장자리에서 보조 내용을 열고 닫는 서랍형 구성요소입니다. 필터, 간단한 상세 정보와 보조 설정처럼 본문을 완전히 교체할 필요가 없는 작업에 사용합니다.

구성 항목

기본 사용

<RxDrawer @ref="filterDrawer"
          Width="24rem"
          Position="right"
          @bind-IsOpen="isFilterOpen">
    <FilterPanel OnApply="ApplyFilter" />
</RxDrawer>

버튼 이벤트에서 OpenDrawer()를 호출하거나 IsOpen 양방향 바인딩으로 상태를 제어할 수 있습니다.

열림 상태 관리

부모 화면에서 다른 작업과 함께 상태를 관리해야 한다면 IsOpen과 IsOpenChanged를 연결합니다. 인스턴스 메서드만 사용할 때도 화면 전환이나 항목 변경 시 열린 서랍에 이전 데이터가 남지 않도록 닫기 또는 재바인딩 시점을 정합니다.

위치와 크기

Position은 현재 구현이 지원하는 방향값을 사용합니다. 오른쪽 상세 정보는 right, 탐색 보조 기능은 화면 구조에 따라 왼쪽을 선택할 수 있습니다. 고정 픽셀 너비를 과도하게 키우지 말고 작은 화면에서는 본문을 가리지 않도록 반응형 CSS를 함께 적용합니다.

본문 구성

서랍 안에는 하나의 명확한 작업을 배치합니다. 긴 표나 여러 단계 편집처럼 넓은 작업 공간이 필요한 경우에는 RwSlideItemViewer나 별도 페이지가 적합합니다. 저장과 취소 버튼을 넣었다면 어느 동작이 서랍을 닫는지 일관되게 처리합니다.

접근성과 포커스

서랍을 연 버튼에는 열림 상태를 전달하고, 닫기 기능에는 분명한 접근성 이름을 제공합니다. 모달 성격으로 사용할 경우 배경의 키보드 조작을 막고 포커스를 내부에 유지해야 합니다. 단순 보조 패널이라면 배경과 서랍 사이의 이동 순서를 확인합니다.

사용 구분

항상 보이는 제품 탐색은 dock-left 패널로 구성하고 RxDrawer로 숨기지 않습니다. RxDrawer는 사용자가 필요할 때 여는 임시 보조 영역에 사용합니다. 작은 사용자 메뉴나 짧은 명령 목록은 RxPopover가 더 적합합니다.

문제 확인

• 열기와 닫기 이벤트가 한 번씩만 발생하는지 확인합니다.
• 항목을 바꿨을 때 이전 항목의 입력값이 남지 않게 합니다.
• 모바일 화면에서 너비가 뷰포트를 넘지 않는지 확인합니다.
• 닫은 뒤 포커스가 서랍을 열었던 버튼으로 돌아가는지 확인합니다.