Tabs

같은 화면 안에서 패널을 전환(요약·근거·이력).

개요

미리보기

예시 언어동작 줄이기

Summary of the Q3 roadmap review meeting.

label

value

activation

이름	타입	기본값	설명
`label`	`string`	`기록 상세`	tablist의 접근 이름.
`items`	`readonly { value, label, content, disabled? }[]`	—	탭과 패널. 미리보기는 요약·근거·이력.
`value?`	`string`	`summary`	처음 / 바깥에서 바뀐 선택값(summary · evidence · history). 상세 안이면 ?tab=(replaceState).
`activation?`	`'manual' \| 'auto'`	`manual`	manual: 화살표는 초점만, Enter·Space로 전환(기본). auto는 패널을 즉시 그릴 수 있을 때만.
`onValueChange?: (value) => void`	—	—	사용자가 탭을 바꿀 때 호출.
`ref`	—	—	ref는 바깥 <div>로 전달된다.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다.

이렇게 · 이렇게 하지 않기

이렇게 같은 대상의 다른 면을 볼 때만 쓰고 화면 이동에는 쓰지 않는다.

이렇게 하지 않기 탭 이름에 개수나 상태 점을 붙이지 않는다.

이렇게 원문 열 수 없음 같은 예외는 근거 패널 안에서 보여야 한다.

이렇게 하지 않기 segmented 모양을 쓰지 않는다. 같은 목록 필터는 SegmentedControl이다.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`기록 상세`	tablist의 접근 이름.
`items`	`readonly { value, label, content, disabled? }[]`	—	탭과 패널. 미리보기는 요약·근거·이력.
`value?`	`string`	`summary`	처음 / 바깥에서 바뀐 선택값(summary · evidence · history). 상세 안이면 ?tab=(replaceState).
`activation?`	`'manual' \| 'auto'`	`manual`	manual: 화살표는 초점만, Enter·Space로 전환(기본). auto는 패널을 즉시 그릴 수 있을 때만.
`onValueChange?: (value) => void`	—	—	사용자가 탭을 바꿀 때 호출.
`ref`	—	—	ref는 바깥 <div>로 전달된다.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다.