화면 제목 줄
화면마다 맨 위에 놓는 제목 · 한 줄 · 기준일이에요. 단위 바꾸기가 오른쪽에 붙어요.
모바일PCAsOfBadge · PageHeader
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 앱 화면 맨 위 제목 줄(틀 고정).
인터페이스#
타입에서 자동으로 뽑은 표예요.
AsOfBadge#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| date | - | string | |
| label | '실거래' | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| settled | - | string | |
| provisional | - | string[] |
PageHeader#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| title* | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| sub | - | string | 제목 아래 한 줄이에요. |
| right | - | ReactNode | 오른쪽 끝에 둘 조작이에요. |
| units | true | boolean | |
| method | - | boolean | 지수 방식(리블·한국부동산원) 세그를 오른쪽 컨트롤 앞에 - 설정 공급자 밖에서 그리는 홈 본체가 쓴다(옛 IndexMethodToggle) |
| asOf | - | string | |
| settled | - | string | |
| provisional | - | string[] |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 제목은 h1이에요.
- 기준일은 글자로 읽혀요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |