List

순서나 병렬 관계가 드러나는 문장 목록.

개요

미리보기

예시 언어동작 줄이기

ordered

density

marker

순서 없음
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.
순서 있음
1. Connect a source.
2. Group the records that were read into projects.
3. Reopen the original when you need it.
촘촘하게
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.
마커 없음
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.

단계
1. Connect a source.
2. Group the records that were read into projects.
3. Reopen the original when you need it.

이름	타입	기본값	설명
`items`	`readonly ReactNode[]`	—	항목 배열. 각각 <li> 하나가 된다. 미리보기는 표본 3개.
`ordered?`	`boolean`	`false`	순서가 뜻을 가지면 ol, 아니면 ul.
`density?`	`'normal' \| 'compact'`	`normal`	항목 간격과 글자 크기.
`marker?`	`'visible' \| 'none'`	`visible`	none이면 마커를 숨기고 role="list"를 명시한다(Safari VoiceOver 대응).
그 밖의 속성	—	—	id, lang, dir, aria-* 등 네이티브 목록 속성은 그대로 전달된다. children은 받지 않는다(items를 쓴다). className·style은 받지 않는다.

예시

순서 없음
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.
순서 있음
1. Connect a source.
2. Group the records that were read into projects.
3. Reopen the original when you need it.
촘촘하게
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.
마커 없음
- Connect a source.
- Group the records that were read into projects.
- Reopen the original when you need it.

단계
1. Connect a source.
2. Group the records that were read into projects.
3. Reopen the original when you need it.

이렇게 · 이렇게 하지 않기

이렇게 순서가 의미 있을 때만 번호 목록을 쓴다. 항목은 같은 문법 형태로 맞춘다. 순위를 암시하는 번호(“1위”)는 쓰지 않는다.

이렇게 항목은 같은 문법 형태로 쓴다(모두 문장 또는 모두 명사구).

이렇게 하지 않기 레이아웃 목적으로 div를 반복하지 않는다. 목록이면 ul/ol이다.

토큰과 속성

이름	타입	기본값	설명
`items`	`readonly ReactNode[]`	—	항목 배열. 각각 <li> 하나가 된다. 미리보기는 표본 3개.
`ordered?`	`boolean`	`false`	순서가 뜻을 가지면 ol, 아니면 ul.
`density?`	`'normal' \| 'compact'`	`normal`	항목 간격과 글자 크기.
`marker?`	`'visible' \| 'none'`	`visible`	none이면 마커를 숨기고 role="list"를 명시한다(Safari VoiceOver 대응).
그 밖의 속성	—	—	id, lang, dir, aria-* 등 네이티브 목록 속성은 그대로 전달된다. children은 받지 않는다(items를 쓴다). className·style은 받지 않는다.