본문으로 건너뛰기

목록과 표시

GroupedList

설정·나 탭처럼 섹션별로 묶은 목록.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

연결

variant

title

titleOrder

footer

state

예시

상태

inset
연결
plain
연결
바닥글
연결
연결을 해제해도 이미 읽은 기록은 남아요.
불러오는 중
연결
아직 읽지 않음
연결
Connect a source to see this.
일부만 읽음
연결
Some dates couldn’t be scanned. What we got is kept.
오류
연결
Couldn’t load this right now.

쓰임 예

머리글 없음

이렇게 · 이렇게 하지 않기

이렇게 머리글은 묶음 이름을, 바닥글은 그 묶음의 결과를 한 줄로 설명한다.
이렇게 위험한 행동은 마지막 묶음에 따로 둔다.
이렇게 하지 않기 같은 행동을 여러 묶음에 반복하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`variant?`	`'inset' \| 'plain'`	`inset`	inset은 둥근 묶음, plain은 전체 폭 행과 구분선.
`title?`	`ReactNode`	`연결`	묶음 이름 = section의 접근 이름. 비우면 머리글 없음(aria-label을 준다).
`titleOrder?`	`2 \| 3`	`2`	머리글 제목 수준.
`footer?`	`ReactNode`		그 묶음의 결과를 한 줄로 설명.
`state?`	`CatalogDataState`	`ready`	묶음의 데이터 상태(README §4). partial·stale은 행을 그대로 둔다.
`children?`	`ReactNode`	—	ListRow들. 미리보기는 연결 행 3개.
`ref`	—	—	ref는 <section>으로 전달된다.
`<Stack>`	—	—	한 GroupedList = 한 묶음. 여러 묶음은 Stack으로 쌓는다.
그 밖의 속성	—	—	id, aria-label(머리글이 없을 때) 등 네이티브 section 속성은 그대로 전달된다. className·style은 받지 않는다.