Menu Floating Action Button

화면 계층 최상위에 위치해 메뉴를 표시 여부를 결정할 수 있는 요소입니다.

구조도

  1. Button - ButtonPrimitive.Button
  2. Label - ButtonPrimitive.Label
  3. Icon
  4. Backdrop
  5. Menu
  6. Menu Item
  7. Menu Item Label
  8. Menu Item Group

컴포넌트 미리보기

옵션

Extended

Menu FAB는 Extended 옵션을 통해 Label을 보조적으로 표현할 수 있습니다. 주로 스크롤 인터랙션에 맞추어 제공합니다.

Label

Label 옵션은 Icon을 보조하며, 유저가 Menu FAB를 클릭했을 시 발생할 액션에 대해 명확한 정보를 전달합니다.

옵션 테이블

속성기본값
isExtendedfalse, truefalse
labeltext

상호작용

마우스 클릭 또는 터치로 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

개발 현황