Sonic UIv0.6.2

Menu

행이나 카드에 딸린 동작을 묶어요. 화살표로 이동하고 Enter로 실행하면 닫혀요.

변형

Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.

이름 바꾸기
키 복사
삭제
수정
default
수정
default · disabled
수정
default · highlighted
수정
default · highlighted · disabled
수정
danger
수정
danger · disabled
수정
danger · highlighted
수정
danger · highlighted · disabled

사용법

  • 위험한 동작은 맨 아래구분선 뒤에 tone="danger"로 두고, 실행 전에 AlertDialog로 확인해요.
  • 크기최소 너비 192, 항목 높이 32, 아이콘 16, 트리거 아래 4px·시작 정렬.

Props

prop값기본값
MenuItem tonedefault · dangerdefault
MenuItem disabledbooleanfalse
MenuSeparator위험한 동작 앞 구분선—

코드

tsx
<Menu>
  <MenuTrigger render={<Button size="icon-md" variant="ghost" aria-label="더 보기" />}><Ellipsis /></MenuTrigger>
  <MenuPopup>
    <MenuItem onClick={rename}><Pencil />이름 바꾸기</MenuItem>
    <MenuSeparator />
    <MenuItem tone="danger" onClick={confirmDelete}><Trash2 />삭제</MenuItem>
  </MenuPopup>
</Menu>