개요
Axure RP로 탭 컨트롤을 만드는 방법입니다. 탭을 클릭하면 해당 탭의 콘텐츠를 표시하는 방법입니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
시작하기
예제 파일 중 Tab control 페이지를 엽니다. 페이지에는 Tab 1, Tab 2 두 개의 탭 위젯이 있으며, 각각 이미 Selected 인터랙션 스타일이 적용된 상태일 것입니다.
이 페이지에는 또한 Body 1, Body 2 두 개의 그룹이 있을텐데, Body 1은 Tab 1의 콘텐츠를 포함하고 있고, Body 2는 Tab 2의 콘텐츠를 포함하고 있습니다.
Dynamic Panel 만들기
Body 1 그룹을 마우스 우클릭하여 Convert to Dynamic Panel 메뉴를 선택합니다. 방금 만든 dynamic panel을 더블 클릭하여 Dynamic Panel State Manager를 실행합니다. 녹색의 + 아이콘을 클릭하여 상태(state)를 하나 더 추가합니다. 방금 생성된 상태(State2)를 더블 클릭하여 편집 화면으로 이동합니다.
Tab control 페이지 화면으로 다시 돌아와서, Body 2를 우클릭한 후 Cut을 선택합니다. State2 화면으로 들어가서 방금 잘라낸 Body 2를 붙여넣고 위치를 (0,0)으로 조정합니다.
Tab 1에 인터랙션 추가하기
Tab control 페이지에 돌아와서, Tab 1을 선택하고 인스펙터의 PROPERTIES탭에서 OnClick을 더블클릭하여 case를 추가합니다.
Case Editor에서 Set Panel State를 클릭합니다. Configure actions에서 좀 전에 만든 dynamic panel을 선택합니다. Select state가 State1으로 설정돼 있는지 확인합니다.
다시 왼쪽 화면에서 Set Selected/Checked를 클릭합니다. This Widget에 체크합니다. OK를 눌러 저장합니다.
Tab 2에도 동일하게 반복하기
Tab 2에도 위와 동일한 과정을 진행합니다. 물론 Set Panel State는 State 2로 설정합니다.
Selection Group 만들기
하나의 탭을 선택하면 다른 탭은 반드시 선택이 해제되어야 합니다. 이를 위해서 탭들을 selection group으로 만들어야 합니다. 이 기능을 통해 한 탭을 선택하면 다른 탭이 자동으로 선택 해제되도록 만들 수 있습니다.
Tab 1과 Tab 2를 모두 선택합니다. 인스펙터의 PROPERTIES 탭에서 Selection Group 필드에 마우스를 클릭하고 TabGroup이라고 입력합니다.
미리보기
Preview 버튼을 눌러 미리보기 해 봅니다.