공통 메뉴 컴포넌트
- 반응형 디자인
- 2 레벨 메뉴
- 톱레벨의 두가지 기능
- 페이지 라우팅
- 하위 메뉴 펼치기
- 톱레벨의 두가지 기능
- 정적/동적 메뉴 구성 (from lite-menu entity)
- 부가메뉴관리페이지에서 동적인 메뉴를 관리할 수 있다.
- 메뉴와 페이지 연결
- 톱레벨은 현재 페이지가 자신의 페이지이거나 하위 메뉴의 페이지이면 강조되어 표현되어야 한다.
- 또한, 톱레벨이 강조되어 표현되는 경우에 하위 메뉴는 펼쳐져야 한다.
- 톱레벨과 하위 메뉴의 연결 관계는 하위 메뉴 페이지의 regexp 등으로 설정가능해야 한다.
- 전체 메뉴에서 하나의 톱레벨만이 강조될 수 있다.
- 두 가지 레이아웃을 제공
- Portrait
- nav 또는 aside 영역에 추가되는 경우
- 상하로 길죽한 형태의 메뉴 구조
- 레벨 1 메뉴를 기본으로 트리형태의 메뉴 구조
- 레벨 2를 펼치거나 숨기는 과정에 슬라이딩 애니메이션
- Landscape
- header 영역에 추가되는 경우
- 좌우로 넓적한 형태의 메뉴 구조
- 모든 레벨의 메뉴가 한번에 보이는 메뉴 구조
- Portrait
- LiteMenu를 배치하는 적절한 포인트는 클라이언트 모듈의 bootstrap.js 이다.
- setupMenuPart(option: {hovering?: boolean, position?: string})
- 주어진 옵션에 따라서 LiteMenu를 생성한다.
- hovering: true | false
- hovering 메뉴인지, 고정자리를 차지하는 메뉴인지를 설정한다
- position: VIEWPART_POSITION.NAVBAR | VIEWPART_POSITION.ASIDEBAR | VIEWPART_POSITION.HEADERBAR
- LiteMenu가 위치할 포지션을 설정한다.
- NAVBAR와 ASIDEBAR를 지정하면 portrait 스타일의 메뉴가 추가되며, 그 외에는 landscape 형태의 메뉴가 추가된다.
- updateMenuTemplate(menutemplate)
- 정적인 메뉴구조를 설정한다.
- 만약 메뉴구조를 변경하고 싶을 때에 호출할 수 있다.
import { updateMenuTemplate, setupMenuPart } from '@things-factory/lite-menu'
import { VIEWPART_POSITION } from '@operato/layout'
...
setupMenuPart({ hovering: false, position: VIEWPART_POSITION.HEADERBAR })
updateMenuTemplate([{
name: '생산',
icon: 'business', /* Material Icon의 이름 */
menus: [
{
name: '생산계획',
path: 'production-plan', /* page 이름 */
icon: 'add_circle_outline'
},
{
name: '작업지시',
path: 'production-order',
icon: 'add_circle_outline'
},
{
name: '로트추적',
path: 'lot-tracing',
icon: 'add_circle_outline'
},
{
name: '자재투입추적',
path: 'material-tracing',
icon: 'add_circle_outline'
}
]
},
{
name: '설비',
icon: 'groups',
menus: [
{
name: '설비상태',
path: 'equipment-state',
icon: 'add_circle_outline'
},
{
name: '설비별데이타이력',
path: 'equipment-data-history',
icon: 'add_circle_outline'
},
{
name: '설비 정비계획',
path: 'equipment-maintenance-plan',
icon: 'add_circle_outline'
}
]
},
{
...
}])