펼침 행

목록의 한 줄을 누르면 그 자리에서 상세가 펼쳐진다. 네이티브 details·summary 라 JS 없이 열고 닫히고, 키보드로는 summary 에 포커스한 뒤 Enter 나 Space 로 연다. 화살표, 여백, hover, 펼친 영역의 배경만 맡고 줄 안의 칸 배치는 summary 로 받는다.

상태

#1024볼트 M8 입고대기

3개 품목 · 검수 전

접힘

#1025너트 M8 입고완료

2개 품목 · 검수 완료

펼침

활용 방법

여러 줄은 Panel flush 안에서 divide-y 로 쌓는다. 각 줄은 따로 열고 닫힌다.

Preview

입고3건

#1024볼트 M8대기

1,200개 · 창고 A

#1025너트 M8완료

800개 · 창고 B

#1026와셔 8mm완료

2,000개 · 창고 A

tsx

<Panel title="입고" count="3건" flush>
  <div className="divide-y divide-border">
    {rows.map((row) => (
      <ExpandRow key={row.id} summary={<RowCells row={row} />}>
        <RowDetail row={row} />
      </ExpandRow>
    ))}
  </div>
</Panel>

줄 강조

tone 은 지연·불량처럼 눈에 띄어야 하는 줄의 배경을 옅게 칠한다. 색만으로 뜻을 전하지 않도록 summary 안에 상태 문구를 함께 둔다.

Preview

#2011배송 지연지연 2일

예정일 10월 3일 · 운송사 확인 중

#2012검수 보류보류

수량 불일치 1건

tsx

<ExpandRow tone="danger" summary={<RowCells row={row} />}>...</ExpandRow>
<ExpandRow tone="warning" summary={<RowCells row={row} />}>...</ExpandRow>

속성

이름	타입	기본값	설명
summary	ReactNode	-	접힌 줄에 보이는 칸들. 화살표 오른쪽 flex 영역에 놓인다
children	ReactNode	-	펼치면 보이는 상세
defaultOpen	boolean	false	처음 렌더할 때 펼친 상태
tone	"danger" \| "warning"	-	줄 배경 강조
className	string	-	root details 클래스
ref	Ref<HTMLDetailsElement>	-	root details. onToggle 등 native props 도 여기에 적용된다