Menu Floating Action Button
화면 계층 최상위에 위치해 메뉴를 표시 여부를 결정할 수 있는 요소입니다.
구조도
- Button - ButtonPrimitive.Button
- Label - ButtonPrimitive.Label
- Icon
- Backdrop
- Menu
- Menu Item
- Menu Item Label
- Menu Item Group
컴포넌트 미리보기
옵션
Extended
Menu FAB는 Extended 옵션을 통해 Label을 보조적으로 표현할 수 있습니다. 주로 스크롤 인터랙션에 맞추어 제공합니다.
Label
Label 옵션은 Icon을 보조하며, 유저가 Menu FAB를 클릭했을 시 발생할 액션에 대해 명확한 정보를 전달합니다.
옵션 테이블
속성 | 값 | 기본값 |
isExtended | false, true | false |
label | text |
상호작용
마우스 클릭 또는 터치로 Menu FAB와 상호작용할 수 있습니다.
키보드
Menu Open
Trigger에 Focus된 상태에서 Space 또는 Enter키를 통해 Menu를 열 수 있습니다. 이때 Focus가 Primary Menu Item으로 이동합니다.
Focus
↑ 또는 ↓키를 통해 Menu Item간 Focus 이동이 가능합니다.
Action
Menu Item에 Focus된 상태에서 Space 또는 Enter키를 통해 Menu Item의 액션을 실행시킬 수 있습니다.
Dismiss
Esc키, 혹은 Trigger에 Focus된 상태에서 Space 또는 Enter키를 통해 Menu를 닫을 수 있습니다.
가이드라인
Working In Progress