PC 머리 줄
PC 화면 맨 위의 검색 · 테마 · 계정 줄이에요. 스크롤해도 위에 붙어 있어요.
모바일PCHeader
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 앱 틀 - 머리 줄·옆 레일·공지·티커·아래 줄. 화면마다 새로 만들지 않아요(틀 고정).
인터페이스#
타입에서 자동으로 뽑은 표예요.
Header#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| setTab* | - | (t: TabId) => void | |
| theme* | - | Theme | |
| mode* | - | ThemeMode | |
| setThemeMode* | - | (m: ThemeMode) => void | |
| onOpenSearch* | - | () => void | |
| onResetLayout* | - | () => void | |
| onLogin* | - | () => void | |
| onGoAccount | - | (section?: string) => void | |
| offsetTop | - | boolean | |
| dockInset | - | number | . |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 검색 열기 · 테마 · 계정은 모두 이름이 있는 버튼이에요.
- 뒤로 지나가는 내용이 비치지 않게 유리 면을 깔아요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |