[Axure 배우기] Dynamic Panel을 이용하여 Check box 만들기

안녕하세요. 서비스 기획자 소소한 G입니다.

 

오늘은 Dynamic Panel을 이용하여 Check box를 만들고 

전체 선택, 부분 선택 방법까지 알아볼거에요. 

 

액슈어의 Widget에 Checkbox라는 라이브러리가 있지만 저는 Dynamic Panel을 이용하여 Checkbox를 만들어서 

'전체 선택'과 같은 기능들을 더 편리하게 사용하고자 합니다.

 

아래의 gif 파일을 통해 하고자 하는 것을 더 쉽게 확인해보세요. 

checkbox.gif

0.09MB

---

1. 우선 Dynamic Panel을 이용하여 체크박스를 만들어요. 

 

Dynamic Panel의 State1에는 빈 박스, State2에는 체크가 된 박스로 설정해 줍니다. 

 

만든 Checkbox인 Daynamic Panel을 감싸줄 박스를 만듭니다. 

이 박스는 만드는 이유는 

Dynamic Panel을 클릭했을 때 클릭이 되었다는 효과를 주기 위해 만듭니다. 

만든 박스를 다음과 같은 인터랙션으로 설정해주고 Selected Style도 다음과 같이 설정해줍니다.

 

 

그리고 이 둘을 겹쳐서 그룹지어 주세요. 

 

아래와 같이 체크박스에 대한 문구를 덧붙여 주어 형태를 완성한 후 3개를 만들어주었습니다. 

---

1. 각 체크박스의 문구 클릭 시 체크가 되도록 설정하기 

 

문구를 선택했을 때 체크가 되어야 하므로 문구에 인터랙션을 설정합니다. 

CLICK OR TAP > Sep Panel State를 선택하고 TARGET을 Dynamic Panel 체크박스로 설정해줍니다. 

세부적인 상태는 아래 이미지와 같이 설정해줍니다. 

 

 

이렇게 설정해주면 문구 선택 시 체크박스에 체크가 되는 인터랙션이 적용됩니다. 

checkbox2.gif

0.03MB

---

2. 전체 클릭 시 모든 체크박스가 선택되도록 설정하기

 

'전체' 문구에 인터랙션을 설정해주면 됩니다. 

그냥 '전체' 문구의 인터랙션에서 나머지 체크박스를 동일한 인터랙션으로 설정해주면 끝입니당!

너무 쉬워요.

아래와 이미지를 참고해 주세요. 

 

 

완성! 뿌듯해.....