BackHeader
화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
이 페이지의 목차
- 분류
- 탐색
- 가져오기
import { BackHeader } from '@/ui/layout'- 코드 위치
apps/mobile/src/ui/layout.tsx:67
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 상세 화면, 설정 하위 화면처럼 앞 화면으로 돌아갈 수 있는 화면 맨 위에 쓴다.
- 오른쪽 행동은
right에 IconButton이나 TextButton으로 넣는다.
쓰지 않는다
- 탭의 첫 화면에 쓰지 않는다. 첫 화면은
TitleHeader다. - 가운데 제목을 한 줄이 넘게 쓰지 않는다. 한 줄로 줄이고 넘치면 …으로 줄인다.
사용 방법#
기본
import { BackHeader } from '@/ui/layout';
<BackHeader title="영어 단어장" right={<IconButton label="검색" onPress={openSearch}><Search size={22} color={color.text} /></IconButton>} />
치수와 토큰#
- 높이
- 52
- 뒤로 아이콘
- ChevronLeft 26px, 선 2.2,
IconButton 40 × 40 - 제목
headline(17/24 Bold), 가운데 정렬, 한 줄- 오른쪽 자리
- 최소 폭 40, 오른쪽 정렬
접근성#
- 뒤로 버튼의 이름은 "뒤로"이고
button 역할이다. - 제목은
header 역할이다.
잘한 예와 잘못한 예#
잘한 예제목은 짧게, 오른쪽 행동은 하나만 둔다.이번 학기 영어 단어장과 문법 정리 노트 모음
- TitleHeader: 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.
- IconButton: 아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.
- Screen: 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.
