SectionTitle
화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.
- 분류
- 면과 목록
- 가져오기
import { SectionTitle } from '@/ui/layout'- 코드 위치
apps/mobile/src/ui/layout.tsx:98
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
최근 자료
언제 쓰는가#
쓴다
- "내 과목", "최근 자료"처럼 목록 묶음 위에 쓴다.
- 오른쪽에는 "전체보기" 같은
TextButton을 둘 수 있다.
쓰지 않는다
- 패널 안의 제목에는 쓰지 않는다.
PanelHead를 쓴다. - 화면의 맨 위 큰 제목에는 쓰지 않는다.
TitleHeader다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 위 24, 아래 12 | style로 바꿀 수 있지만 바꾸지 않는다(규칙 S4). |
상태#
최근 자료
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 기본 모습이다. |
사용 방법#
기본
기본
import { SectionTitle } from '@/ui/layout';
<SectionTitle title="최근 자료" right={<TextButton label="전체 보기" onPress={openAll} />} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
title | string | — | 필수 | 제목(headline). |
right | ReactNode | — | 선택 | 오른쪽 요소. |
style | StyleProp<ViewStyle> | — | 선택 | 간격을 바꿀 때만 쓴다. |
치수와 토큰#
- 간격
- 위
xl(24), 아래md(12) - 글자
headline(17/24 Bold)- 배치
- 제목은 왼쪽, 오른쪽 요소는 끝(
space-between)
접근성#
- 제목 글자는 읽힌다. 역할은 따로 지정하지 않는다.
잘한 예와 잘못한 예#
최근 자료
최근 자료
함께 보는 컴포넌트#
- Panel: 회색 바탕(
canvas) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다. - TitleHeader: 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.
- TextButton: 글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.