이 튜토이얼에서는 UXPin에서 스테이트를 사용하여 아코디언 메뉴를 만드는 방법을 보여줍니다.
https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F284af429-6bbb-488d-8627-53564518bfd7_00_final.mp4
→ 이 튜토리얼에서 설명하는 디자인을 .uxp 파일로 다운받아 참고하실 수 있습니다.
메뉴 섹션 만들기
- 빠른 도구 메뉴의 Box (상자) 도구를 사용하여 메뉴 섹션을 만듭니다. 그런 다음 Text (텍스트)를 사용하여 헤더, 텍스트 및 아이콘을 추가합니다.
- 상자와 다른 요소를 선택하고 단축키 ⌘ + G 또는 상단 메뉴바의 버튼을 이용에서 그룹화합니다.
- 이 섹션을 두 번 복제하여 각 섹션의 디자인과 콘텐츠를 조정합니다.
메뉴 스테이트 만들기
- 세 그룹을 모두 선택하고 그룹화합니다.
- 두번째 섹션을 선택하고 속성패널의 Crop selected content (선택한 컨텐츠 자르기)에 체크를 넣습니다. 헤더만 표시되도록 이 섹션을 잘라냅니다. 이것을 다른 섹션에도 반복합니다. 그러나 첫 번째 섹션은 잘라내지 않고 확장된 상태로 둡니다.
<aside>
💡 힌트
콘텐츠를 자르고 숨기면 섹션을 접힌 형태로 만들 수 있습니다. 이것은 베이스 스테이트 (base state)에서만 가능합니다.
</aside>
https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F2e66e146-9456-4eec-9bd9-771d069e9995_02.mp4
- 상단 메뉴바의 Add State (스테이트 추가)를 클릭하여 State 2 및 State 3을 만듭니다.
https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F965977eb-17ce-492d-80ff-c686e42e57f5_03.mp4
- 각 스테이트에서 단 하나의 섹션만 확장되어 있어야 합니다. 두 번째 스테이트에서는 State 2, 세 번째 스테이트에서는 State 3가 확장되어 있습니다. 각 섹션을 확장한 후 모든 섹션이 열에 균등하게 배치되어 있는지 확인합니다.
클릭으로 섹션 표시 전환