Mobile Navigation Bar

Mobile Navigation Bar는 휴대전화의 하단에서 몇 개의 최상위 페이지로 이동하는 위젯입니다. 한 줄에 최대 네 항목을 표시하며 하위 메뉴로 추가 항목을 제공할 수 있습니다.

휴대전화 하단에 배치된 최상위 페이지 탐색 항목

설정

모듈의 Device type을 Mobile로 설정합니다. 편집 화면 왼쪽 Layout에서 Navigation Bar를 선택합니다.

Layout에서 모바일 Navigation Bar를 여는 위치

오른쪽 위 Module Navigation Bar Visible을 켜고 레이블과 아이콘이 있는 항목을 추가합니다. 보통 각 항목의 + Add event에서 해당 최상위 페이지로 전환하는 이벤트를 연결합니다.

탐색 항목에 페이지 전환 이벤트를 연결하는 설정

활성화하면 페이지 사이를 이동해도 하단에 계속 표시됩니다. 탐색 바를 가리고 집중해서 입력할 화면은 전체 화면을 덮는 드로어로 구성합니다.

페이지를 여는 항목은 그 페이지가 활성화되면 강조됩니다. 사용자가 그 페이지에서 다른 상세 페이지로 들어가도 강조가 유지되어 어느 최상위 흐름에서 왔는지 나타냅니다.

예를 들어 Flights 항목이 Flight list를 열고 목록의 항공편을 선택하면 Flight 360 상세 페이지로 이동하는 구성에서는, 상세 페이지에서도 Flights 항목이 강조됩니다. 사용자는 Flights를 눌러 목록으로 돌아갈 수 있습니다.

설정	동작
Icon	Carbon 등 Foundry의 다른 위치에 모바일 앱이 삽입될 때 나타나는 앱 아이콘입니다.
Title	앱을 열었을 때 브라우저 탭에 표시할 제목입니다.
Height	탐색 바의 픽셀 높이입니다.
Hide menu text	항목의 텍스트를 숨기고 아이콘만 표시합니다.
Navigation items	하단에 표시할 최대 네 항목입니다.

각 Navigation item은 다음을 설정합니다.

설정	동작
Type	single은 레이블과 아이콘을 표시하고 이벤트를 실행합니다. submenu는 선택했을 때 중첩된 single 항목 목록을 엽니다.
Label	짧은 단어나 구를 권장합니다.
Icon	해당 항목의 아이콘입니다.
Event	항목을 선택했을 때 실행할 Workshop 이벤트입니다. 보통 모듈 페이지 전환을 연결합니다.

최상위 항목이 많아지면 앱 분리와 모바일 설계를 검토합니다.