본문으로 건너뛰기
TDSMoring 디자인 시스템

TitleHeader

탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.

이 페이지의 목차
분류
탐색
가져오기
import { TitleHeader } from '@/ui/layout'
코드 위치
apps/mobile/src/ui/layout.tsx:57

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

내 과목

제목 + 오른쪽 행동

언제 쓰는가#

쓴다

  • "내 과목", "복습 스케줄"처럼 탭의 첫 화면 맨 위에 쓴다.
  • 오른쪽에는 아이콘 버튼 한두 개를 넣는다.

쓰지 않는다

  • 뒤로 갈 수 있는 화면에 쓰지 않는다. BackHeader를 쓴다.
  • 제목을 두 줄로 쓰지 않는다.

종류#

종류가 없다.

크기#

TitleHeader 크기
이름값설명
기본최소 높이 56위쪽 여백 16, 아래쪽 12.

상태#

내 과목

기본
TitleHeader 상태
상태모습과 동작
기본기본 모습이다.

사용 방법#

기본

기본
import { TitleHeader } from '@/ui/layout';

<TitleHeader title="내 과목" right={<IconButton label="검색" onPress={openSearch}><Search size={22} color={color.text} /></IconButton>} />

속성(props)#

TitleHeader 속성
이름타입기본값필수설명
titlestring—필수제목.
rightReactNode—선택오른쪽에 놓을 요소들(간격 4로 가로로 놓인다).

치수와 토큰#

높이
최소 56, 위 16, 아래 12
제목
title(21/29 Bold), 역할 header
오른쪽
가로 배치, 요소 사이 4

접근성#

  • 제목은 header 역할이다.

잘한 예와 잘못한 예#

복습 스케줄

잘한 예탭의 첫 화면에서 제목과 행동 하나.

영어 단어장 상세

잘못한 예상세 화면에서는 뒤로 갈 방법이 없어진다. BackHeader를 쓴다.
  • BackHeader: 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
  • Screen: 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.
  • SectionTitle: 화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.