Design Docs

MenuList메뉴 리스트 컴포넌트입니다. Portal을 사용하여 지정된 위치에 메뉴를 표시합니다.

Examples

Basic Menu기본 메뉴 사용 예시

MenuItem Props

Props

Name	Type	Default	Required	Description
children	string		Yes	메뉴 아이템 내용
onClick	string	() => {}	-	클릭 이벤트 핸들러
menuItemCss	string	{}	-	커스텀 CSS 스타일

Direction Options• right-top - 기준 요소의 오른쪽 상단• left-top - 기준 요소의 왼쪽 상단• left-bottom - 기준 요소의 왼쪽 하단 (기본값)• right-bottom - 기준 요소의 오른쪽 하단

Props

Name	Type	Default	Required	Description
isShow	boolean	false	Yes	메뉴 표시 여부
targetId	string		Yes	메뉴를 표시할 기준 요소의 ID
closeDispatch	string		Yes	메뉴를 닫을 때 호출되는 함수
children	string		Yes	메뉴 내용 (MenuItem 컴포넌트들)
direction	'right-top' \| 'left-top' \| 'right-bottom' \| 'left-bottom'	left-bottom	-	메뉴 표시 방향
portalCss	string	{}	-	Portal 컨테이너 커스텀 CSS
menuListCss	string	{}	-	메뉴 리스트 커스텀 CSS
shouldIgnoreSafeArea	boolean	false	-	Safe area 무시 여부

Sub Components• MenuItem - 개별 메뉴 항목• MenuList - 메뉴 항목들을 감싸는 컨테이너

Design Docs

MenuList메뉴 리스트 컴포넌트입니다. Portal을 사용하여 지정된 위치에 메뉴를 표시합니다.

Examples

Basic Menu기본 메뉴 사용 예시

MenuItem Props

Props

Name	Type	Default	Required	Description
children	string		Yes	메뉴 아이템 내용
onClick	string	() => {}	-	클릭 이벤트 핸들러
menuItemCss	string	{}	-	커스텀 CSS 스타일

Props

Name	Type	Default	Required	Description
isShow	boolean	false	Yes	메뉴 표시 여부
targetId	string		Yes	메뉴를 표시할 기준 요소의 ID
closeDispatch	string		Yes	메뉴를 닫을 때 호출되는 함수
children	string		Yes	메뉴 내용 (MenuItem 컴포넌트들)
direction	'right-top' \| 'left-top' \| 'right-bottom' \| 'left-bottom'	left-bottom	-	메뉴 표시 방향
portalCss	string	{}	-	Portal 컨테이너 커스텀 CSS
menuListCss	string	{}	-	메뉴 리스트 커스텀 CSS
shouldIgnoreSafeArea	boolean	false	-	Safe area 무시 여부

Sub Components• MenuItem - 개별 메뉴 항목• MenuList - 메뉴 항목들을 감싸는 컨테이너