액슈어(Axure) 따라하기 1. 대분류/중분류/소분류 드랍다운 만들기

액슈어(Axure) 따라하기 1. 대분류/중분류/소분류 드랍다운 만들기

 

서비스기획을 하다보면 가끔 대분류/중분류/소분류 드랍다운을 만들어야 하는 순간이 오는데요.

대분류의 값(Value)에 따라 중분류를 다르게 노출하고

중분류의 값(Value)에 따라 소분류를 다르게 노출하고 싶은 순간이 생깁니다.

 

그 때 아주 유용하게 사용할 수 있는 기능입니다.

 

1. 대분류 드랍다운을 만든다.
2. 중분류 드랍다운을 다이나믹 패널로 바꾼다.
3. 중분류 다이나믹 패널의 state를 설정하기
4. 다이나믹 패널이 된 중분류 드랍다운의 값을 설정한다. (state 별로)
5. 소분류 드랍다운을 다이나믹 패널로 바꾼다.
6. 소분류 다이나믹 패널의 state를 설정하기
7. 다이나믹 패널이 된 소분류 드랍다운의 값을 설정한다. (state 별로)
8. 대분류 드랍다운의 “OnSelectionChange”기능을 통해 Case별 Condition에 따라 중분류 다이나믹 패널의 state를 변경하기
9. 중분류 드랍다운의 “OnSelectionChange”기능을 통해 Case별 Condition에 따라 소분류 다이나믹 패널의 state를 변경하기
10. 미리보기

 

생각보다 참 쉽게 대분류 / 중분류 / 소분류를 보여줄 수 있습니다.

 

1. 대분류 드랍다운을 만든다.

 

2. 중분류 드랍다운을 다이나믹 패널로 바꾼다.

 

3. 중분류 다이나믹 패널의 state를 설정하기

 

4. 다이나믹 패널이 된 중분류 드랍다운의 값을 설정한다. (state 별로)

 

 

5. 소분류 드랍다운을 다이나믹 패널로 바꾼다.

6. 소분류 다이나믹 패널의 state를 설정하기

 

7. 다이나믹 패널이 된 소분류 드랍다운의 값을 설정한다. (state 별로)

 

 

8. 대분류 드랍다운의 “OnSelectionChange”기능을 통해 Case별 Condition에 따라 중분류 다이나믹 패널의 state를 변경하기

 

 

 

 

 

 

 

9. 중분류 드랍다운의 “OnSelectionChange”기능을 통해 Case별 Condition에 따라 소분류 다이나믹 패널의 state를 변경하기

그리고 중분류 <-> 소분류도 위와 같은 방법으로 적용해봅니다.

 

 

10. 미리보기

그리고 미리보기를 통해 완성된 “대분류/중분류/소분류” 드랍다운을 만드실 수 있습니다.

 

 

 

 

공유링크 : https://3puf0x.axshare.com

작업파일 : 

반응형드랍다운_대중소분류.rp

다운로드