개요
Axure RP로 Droplist를 만드는 방법입니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
드롭리스트 옵션 숨기기
예제 파일 중, Custom Droplist 페이지를 엽니다. 캔버스 위에는 Custom Droplist라는 그룹이 있을 것입니다. 그 그룹은 크게 두 개의 그룹으로 구성되어 있는데, 하나는 버튼 역할을 하는 Select Button이고 다른 하나는 드롭리스트 역할을 하는 Options입니다.
Options 그룹을 선택한 후에 인스펙터의 STYLE 탭에서 Hidden에 체크합니다.
드롭리스트 옵션 표시 토글
이번에는 Select Button 그룹을 선택합니다. PROPERTIES 탭에서 OnClick을 더블클릭하여 케이스를 추가합니다.
왼쪽 화면에서 Toggle Visibility를 선택하고 오른쪽 화면에서 Options 그룹에 체크합니다. Animate Show에서 slide down을 선택합니다(그러면 Animate Hide에서 slide up은 자동으로 선택됩니다).
OK를 눌러 저장합니다.
옵션을 클릭했을 때 선택한 옵션이 버튼에 표시되고 사라지게 만들기
Options 그룹 중에서 Option 1 위젯을 선택합니다. 그리고 PROPERTIES 탭에서 OnClick을 더블클릭하여 케이스를 추가합니다.
Case Editor의 왼쪽 화면에서 Set Text를 선택하고 오른쪽의 Configure actions에서 Select Button 그룹의 사각형 위젯에 체크합니다. 그 아래쪽의 Set text to 영역의 첫 번째 박스에서 text on widget을 선택하고 오른쪽 박스는 this를 유지합니다. 이 설정을 통해 Option 1을 선택하면 Select Button에 Option 1의 텍스트가 표시되도록 합니다.
다시 왼쪽 화면으로 가서, Hide를 선택합니다. 오른쪽 화면에서 Options 그룹을 선택하고 Animate에서 slide up을 선택합니다.
OK를 눌러 저장합니다.
다른 옵션 리스트에도 OnClick 액션 붙여넣기
Option 1에 지정한 OnClick 액션을 Option 2~4에도 붙여넣어 동일하게 동작하게 만듭니다. Option 1 위젯을 선택한 상태에서 PROPERTIES의 OnClick 하위에 있는 Case 1을 복사합니다. 그리고 각각 Option 2~4를 선택하여 OnClick 하위에 붙여넣기 합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.