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

Gap · HScroll

Gap은 세로 빈 간격이고, HScroll은 가로로 밀어 보는 줄이다. 레이아웃을 돕는 작은 컴포넌트다.

이 페이지의 목차
분류
면과 목록
가져오기
import { Gap, HScroll } from '@/ui/layout, @/ui/controls'
코드 위치
apps/mobile/src/ui/layout.tsx:107

미리보기#

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

전체수학영어국어한국사과학사회
HScroll: 칩이 많을 때
Gap: 12와 24 (점선이 간격)

언제 쓰는가#

쓴다

  • Gap: 요소 사이에 간격 토큰 높이의 빈 공간을 넣을 때 쓴다. 기본 12(md).
  • HScroll: 칩이나 카드가 많아 한 줄에 다 안 들어갈 때 옆으로 밀게 한다. 요소 사이 간격은 8(sm)이다.

쓰지 않는다

  • Gap에 간격 토큰에 없는 값을 쓰지 않는다.
  • HScroll 안에 핵심 행동을 숨기지 않는다. 가로로 밀어야 보인다는 것을 모르는 사용자가 있다.

종류#

종류가 없다.

크기#

Gap · HScroll 크기
이름값설명
Gap`size` 기본 12값은 간격 토큰(xs4 ~ xxxl40) 중에서 고른다.
HScroll요소 사이 8스크롤 막대는 숨긴다.

상태#

Gap · HScroll 상태
상태모습과 동작
기본Gap은 눈에 보이지 않는다. HScroll은 가로로 밀린다.

사용 방법#

Gap

Gap
import { Gap } from '@/ui/layout';

<Panel title="이번 주">{/* … */}</Panel>
<Gap size={space.xl} />
<Panel title="지난 주">{/* … */}</Panel>

HScroll

HScroll
import { HScroll } from '@/ui/controls';

<HScroll>
  {subjects.map((s) => <Chip key={s.id} label={s.name} />)}
</HScroll>

속성(props)#

Gap

Gap 속성
이름타입기본값필수설명
sizenumberspace.md선택높이(px). 기본 space.md(12).

HScroll

HScroll 속성
이름타입기본값필수설명
childrenReactNode—필수가로로 놓을 요소들.

치수와 토큰#

Gap
높이만 있는 빈 View
HScroll
가로 ScrollView, 요소 사이 space.sm(8), 스크롤 막대 숨김

접근성#

  • HScroll은 화면 읽기 프로그램에서 가로 스크롤 영역으로 읽힌다. 줄에 들어 있는 요소는 모두 같은 방법으로 읽을 수 있어야 한다.

잘한 예와 잘못한 예#

전체수학영어국어과학
잘한 예칩 같은 보조 선택지를 가로 줄에 둔다.
잘못한 예주 버튼을 가로 스크롤 줄에 두면 안 보일 수 있다.
  • Chip: 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
  • Panel: 회색 바탕(canvas) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
  • SectionTitle: 화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.