개요
Axure RP로 커스텀 체크박스와 라디오 버튼을 만드는 방법입니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
체크 표시 숨기기
예제 파일 중, Custom Checkbox and Radio Button이라는 페이지를 엽니다. 캔버스에는 Custom Checkbox와 Custom Radio Button 두 개의 위젯 그룹이 있습니다.
Custom Checkbox 그룹에서 Tick Mark을 선택하고, 인스펙터의 STYLE 탭에서 Hidden에 체크합니다. 마찬가지로 Custom Radio Button 그룹의 Tick Mark도 숨김 처리합니다.
커스텀 체크박스
클릭시 체크 표시와 선택 상태 토글하기
Custom Checkbox 그룹을 선택하고 인스펙터의 PROPERTIES 탭에서 OnClick을 더블클릭합니다.
Case Editor에서 Toggle Selected를 선택하고 Configure actions에서 This Widget에 체크합니다. 이를 통해 이 그룹 위젯이 선택된 상태를 토글할 수 있음은 물론, 버튼 위젯의 Selected 인터랙션 스타일도 토글할 수 있게 됩니다.
다시 왼쪽 화면에서 Toggle Visibility를 선택하고 Tick Mark 위젯에 체크합니다. OK를 눌러 저장합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.
커스텀 라디오 버튼
Selection Group 만들기
Custom Radio Button 그룹을 선택한 후, PROPERTIES 탭에서 Group 하위의 Selection Group에 Custom Radio Group이라고 입력합니다. 이렇게 설정하면, 하나의 버튼이 선택되면 나머지 버튼의 체크표시가 자동으로 해제되도록 할 수 있습니다.
클릭시 체크 표시가 표시되고 선택되도록 만들기
Custom Radio Button 그룹이 선택된 상태에서, PROPERTIES 탭에서 OnClick을 더블클릭하여 새로운 케이스를 추가합니다.
Case Editor 왼쪽 화면에서 Selected를 선택하고 Configure actions에서 This Widget에 체크합니다.
다시 왼쪽에서 Show를 선택하고 오른쪽 화면에서 Custom Radio Button 그룹에 있는 Tick Mark에 체크합니다. OK를 눌러 저장합니다.
라디오 버튼은 Unselect라는 개념이 없으므로
Toggle을 선택하지 않습니다.
선택 해제되었을 때 체크 표시 감추기
Custom Radio Button 그룹의 Tick Mark 위젯을 선택하고 PROPERTIES 탭에서 More Events를 클릭합니다. 그 중 OnUnselected를 선택하여 케이스를 추가합니다.
Case Editor의 왼쪽 화면에서 Hide를 선택하고 Configure actions에서 This Widget에 체크합니다. OK를 눌러 저장합니다.
커스텀 라디오 버튼 그룹 복제하기
Custom Radio Button을 복사한 후 여러 개 붙여 넣습니다. 테스트를 위해 각 라디오 버튼의 레이블 숫자를 변경합니다.
페이지를 열었을 때 라디오 버튼 중 하나가 미리 선택되어 있게 하려면 해당 그룹을 선택한 후에
PROPERTIES탭에서Selected에 체크합니다. 그리고 체크 표시의Hidden에 체크 해제합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.