TopBar
제목, 뒤로, 행동 하나. 스크롤하면 Glass로 바뀜.
- 출시 화면에서 사용
개요
미리보기
기록
예시
상태
큰 제목
기록
스크롤됨
기록
작은 제목
행동 하나
기록
랜딩
쓰임 예
뒤로 없음
기록
이렇게 · 이렇게 하지 않기
- 이렇게 오른쪽 행동은 하나까지다.
- 이렇게 뒤로 버튼의 이름은 돌아갈 화면 이름이다(“기록”).
- 이렇게 랜딩 변형에는 로고와 로그인 링크만 둔다.
- 이렇게 하지 않기 제목 크기를 보간하거나 scale로 줄이지 않는다. 두 제목을 opacity로 교차한다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant? | 'large' | 'inline' | 'landing' | large | large = 막대 아래 큰 h1, inline = 막대 안 제목(h1은 본문), landing = 로고 + 로그인 링크. |
title | ReactNode | 기록 | 화면 제목. large에서는 페이지의 유일한 h1. |
backHref? | string | /today | 뒤로 목적지 URL(history.back 버튼이 아니라 링크). 비우면 없음. |
backLabel? | ReactNode | 오늘 | 돌아갈 화면 이름(chevron 옆). |
action? | ReactNode | none | 오른쪽 행동 하나(IconButton/Button). 미리보기는 아이콘을 IconButton으로 감싼다. |
loginHref? | string | /login | landing에서 로그인 링크 목적지. |
scrolled? | boolean | false | 스크롤된(Glass) 모양을 강제. 주지 않으면 window 스크롤을 따른다. |
ref | — | — | ref는 <header>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 header 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: Tab: 뒤로 링크 → 행동.
- 스크롤로 큰 제목 ↔ 작은 제목이 바뀌어도 초점과 h1은 그대로다(h1은 하나, 작은 제목은 aria-hidden).
- Glass와 작은 제목은 opacity만 fast로 바뀐다. 투명도 줄이기면 처음부터 불투명 막대.