행 메뉴

표의 행이나 카드 끝에 두는 「⋯」 메뉴. Popover 위에 서고, 항목은 링크, 클라이언트 동작, 서버 액션 폼, 구분선 네 가지다. 메뉴 안의 클릭은 행이나 카드로 전파되지 않는다. 지우기 같은 항목의 확인 절차는 호출자가 맡는다.

활용 방법

항목 종류

href 는 링크, onClick 은 단추, divider 는 구분선이다. tone danger 는 글자만 빨갛게 한다.

Preview

열기

tsx

<RowMenu
  items={[
    { label: "열기", href: `/items/${id}` },
    { label: "복제", onClick: duplicate },
    { divider: true },
    { label: "삭제", onClick: () => setPending(id), tone: "danger" },
  ]}
/>

누를 수 있는 카드 안

카드 전체를 누르면 상세가 열리는 목록에서도 「⋯」 과 그 항목을 누를 때는 카드의 클릭이 일어나지 않는다.

Preview

볼트 M8대기

카드를 누른 횟수: 0

tsx

<div onClick={openDetail}>
  ...
  <RowMenu items={menu(item)} />
</div>

다른 폼 안에 있을 때

일괄 처리 표처럼 행 전체가 한 폼 안에 있으면 메뉴의 서버 액션 폼을 그 안에 둘 수 없다. 브라우저가 안쪽 form 을 버려 숨은 칸이 바깥 폼에 섞인다. action 항목에 form 아이디를 주고, 같은 항목 목록으로 RowMenuForms 를 바깥 폼 밖에 렌더한다. 메뉴의 단추는 form 속성으로 그 폼을 가리킨다.

속성

이름	타입	기본값	설명
items	RowMenuItem[]	-	{ label, href } · { label, onClick } · { label, action, fields?, form? } · { divider: true }. 앞의 셋은 tone?: "danger"
label	string	"더 보기"	「⋯」 단추의 접근 가능한 이름
className	string	-	root details 클래스
ref	Ref<HTMLDetailsElement>	-	root details