SectionHeader
연·월로 목록을 나누는 고정 머리글. 개수 없음.
- 출시 화면에서 사용
개요
미리보기
2025년 3월
- Record title 1
- Record title 2
- Record title 3
- Record title 4
- Record title 5
- Record title 6
- Record title 7
- Record title 8
예시
상태
고정(스크롤해 보기)
2025년 3월
- Record title 1
- Record title 2
- Record title 3
- Record title 4
- Record title 5
- Record title 6
- Record title 7
- Record title 8
고정 안 함
2025년 3월
- Record title 1
- Record title 2
- Record title 3
- Record title 4
- Record title 5
- Record title 6
- Record title 7
- Record title 8
연도 아래 월
3월
- Record title 1
- Record title 2
- Record title 3
- Record title 4
- Record title 5
- Record title 6
- Record title 7
- Record title 8
쓰임 예
올해(연도 생략)
10월
- Record title 1
- Record title 2
- Record title 3
- Record title 4
- Record title 5
- Record title 6
- Record title 7
- Record title 8
이렇게 · 이렇게 하지 않기
- 이렇게 날짜 묶음 이름만 쓴다. 올해는 연도를 생략한다.
- 이렇게 하지 않기 개수를 붙이지 않는다. 기록이 많은 달이 더 중요해 보이지 않게 하기 위해서다.
- 이렇게 스크롤 컨테이너의 scroll-padding-top에 머리글 높이를 더해 초점 행이 가려지지 않게 한다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
level? | 2 | 3 | 2 | h2는 연도나 최상위 월, h3은 연도 아래 월. |
sticky? | boolean | true | 스크롤 컨테이너 위쪽에 고정(position: sticky). |
children | ReactNode | 2025년 3월 | 날짜 묶음 이름만(DateText/Intl). 개수를 넣지 않는다. |
ref | — | — | ref는 h2/h3으로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 heading 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 초점을 받지 않는다. 제목 탐색(H 키)으로 달 사이를 건너뛴다.
- 개수를 이름에 넣지 않는다(활동량 금지).
- 고정 머리글은 Glass 면이다. 투명도 줄이기와 forced-colors에서는 불투명 면.