Open터미널 열기
마크다운으로 복사링크 공유

시트

폰·태블릿은 아래에서 올라오고, PC에서는 가운데 카드로 열려요. 머리·본문·아래 줄을 조합해 써요.

모바일PCSheet · Sheet.Grab · Sheet.Handle · Sheet.Header · Sheet.Title · Sheet.Description · Sheet.Body · Sheet.Footer관련 대화상자 · 팝오버 · 버튼
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 아래·옆에서 올라오는 긴 내용(조건·목록).

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

아래 시트 열기#

머리 · 본문 · 아래 줄로 짜요. PC에서는 가운데 카드로 열려요.

제목 없이 이름 주기#

머리가 없으면 label이 시트의 이름이 돼요.

끌어 내려 닫기#

손잡이나 머리를 잡고 아래로 끌면 닫혀요.

화면 전체 쓰기#

조건이 많은 필터처럼 길면 전체 화면으로 열어요.

뒤로 가기로 닫기#

폰·태블릿(1023px 이하)에서는 뒤로 가기 몸짓으로 닫혀요. 주소는 바뀌지 않아요.

바깥을 눌러도 닫지 않기#

잃으면 안 되는 입력이 있을 때만 써요. 닫기 버튼은 꼭 둬요.

해부도#

  1. 1

    딤

    뒤 화면을 40%로 덮어요. 누르면 닫혀요.

  2. 2

    면

    폰은 아래에 붙고 위 모서리만 둥글어요. 1024px 이상은 가운데 카드예요.

  3. 3

    손잡이

    선택이에요. Sheet.Grab 안에 두면 끌어 닫을 수 있어요.

  4. 4

    머리

    제목(h2)이 시트의 이름이 돼요. 오른쪽 끝에 닫기가 있어요.

  5. 5

    본문

    남는 높이를 먹고 안쪽만 스크롤돼요.

  6. 6

    아래 줄

    주 동작 버튼 하나. 아래 안전 영역을 스스로 띄워요.

속성#

Desktop#

1024px 이상에서 dialog는 가운데 카드, sheet는 아래 시트 그대로, full은 전체 화면이에요.

Tone#

면은 bg(기본) 아니면 surface예요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

Sheet#

속성기본값타입설명
open-boolean열렸는지예요. 기본 true라 부모가 조건부로 그려도 돼요. false가 되면 나가는 움직임 뒤 사라져요
onClose*-() => void닫아야 할 때 불러요.
label-string제목이 없을 때의 이름(aria-label)이에요. 제목이 있으면 그 제목이 이름이 돼요
layer-'stickyName' | 'panelSticky' | 'chrome' | 'stickyHeadName' | 'rail' | 'stickyHead' | 'do…쌓임 층 이름이에요(파운데이션 레이아웃 › 쌓임 층)
initialFocus-RefObject<HTMLElement | null>열릴 때 처음 초점을 줄 요소예요. 없으면 첫 초점 가능 요소예요
closeOnBack주의-boolean | 'narrow'브라우저·폰 뒤로 가기로 닫아요. 'narrow'는 1023px 이하(아래 시트·전체 화면)에서만. 주소는 바뀌지 않아요
UNSAFE_disableFocusLock주의-boolean포커스 트랩·처음 초점·복원을 꺼요. 키보드 사용자가 밖으로 새니 직접 대신할 때만 써요
UNSAFE_ignoreDimmerClick주의-boolean딤을 눌러도 닫지 않아요. 잃으면 안 되는 입력이 있을 때만 써요
UNSAFE_ignoreEsc주의-booleanEsc로 닫지 않아요. 닫기 버튼을 꼭 둘 때만 써요
UNSAFE_disableScrollLock주의-boolean뒤 페이지 스크롤을 잠그지 않아요. 뒤 화면을 함께 움직여야 할 때만 써요
size-'auto' | 'full'폰에서의 높이예요. auto는 내용만큼(maxHeight까지), full은 화면 전체예요
desktop-'dialog' | 'sheet' | 'full'1024px 이상에서의 모양이에요. dialog 가운데 카드 · sheet 아래 시트 그대로
maxHeight-string아래 시트의 최대 높이(CSS 값)예요. 키보드가 올라오면 그만큼 줄어요
width-'sm' | 'md' | 'lg'desktop="dialog"일 때 폭이에요. sm 384 · md 448 · lg 512px
desktopMaxHeight-stringdesktop="dialog"일 때 최대 높이예요
tone-'bg' | 'surface'면 색이에요. bg(기본) · surface
border-boolean위 가장자리에 선을 그어요
dim-number딤 불투명도(%)예요
safeArea-boolean아래 안전 영역을 시트가 띄워요. 아래 줄이 스스로 띄우면 false예요
scroll-boolean시트 전체가 스크롤돼요(머리까지). 기본은 본문만 스크롤돼요
swipeToClose-booleanSheet.Grab(손잡이·머리)을 아래로 끌어 닫아요
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

Sheet.Grab#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

Sheet.Handle#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

Sheet.Header#

속성기본값타입설명
title*-ReactNode마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
right-ReactNode오른쪽 끝에 둘 조작이에요.
closetrueboolean
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

Sheet.Title#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

Sheet.Description#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

Sheet.Body#

속성기본값타입설명
scrolltrueboolean
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

Sheet.Footer#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

Sheet#

tone=surface

상태슬롯속성값
enabledpanel배경색surface

tone=bg

상태슬롯속성값
enabledpanel배경색bg

size=auto

상태슬롯속성값
enabledpanel위 모서리16px

border=true, size=auto

상태슬롯속성값
enabledpanel위 테두리 두께1px
테두리 색line

desktop=dialog

상태슬롯속성값
enabled · 1024px 이상panel폭100%
모서리16px
테두리 두께0px

exiting=true

상태슬롯속성값
enabledpanel시간150ms
이징ease-in

entering=true

상태슬롯속성값
enabledpanel이징ease-out

Sheet.Header#

base

상태슬롯속성값
enabledroot간격8px
좌우 여백16px
아래 여백12px
위 여백16px
title최소 폭0px
글자 크기t-title
굵기700
글자색ink
icon크기20px

Sheet.Body#

base

상태슬롯속성값
enabledroot최소 높이0px

Sheet.Footer#

base

상태슬롯속성값
enabledroot위 테두리 두께1px
테두리 색line
좌우 여백16px
위 여백12px

Sheet.Handle#

base

상태슬롯속성값
enabledroot바깥 위 여백8px
높이4px
폭36px
모서리완전 원(9999px)
배경색line

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
바깥 틀role="dialog" · aria-modal="true"
이름Sheet.Header·Title의 h2 → aria-labelledby, 없으면 label → aria-label
설명Sheet.Description → aria-describedby
딤button · aria-label="닫기" · Tab 순서에서 빠짐

키보드#

키동작
Tab · Shift+Tab시트 안에서만 돌아요
Esc닫아요
뒤로 가기closeOnBack="narrow"면 폰·태블릿에서 닫아요(주소 그대로)

화면 읽기 프로그램#

  • 열리면 첫 포커스 가능 요소로 초점이 가고, 닫히면 연 버튼으로 돌아와요.

초점#

  • 열려 있는 동안 뒤 페이지는 스크롤되지 않아요.
  • 키보드가 올라오면(--kb) 시트가 그만큼 올라가고 최대 높이가 줄어요.
  • 동작 줄이기 설정이면 움직이지 않고 바로 열리고 닫혀요.

가이드라인#

언제 쓰나요#

  • 고르기·보내기처럼 한 가지 일을 화면을 떠나지 않고 끝낼 때.
  • 폰에서 팝오버가 좁을 때(컬럼 편집·유형 고르기).

이렇게 써요#

문구#

  • 제목은 하는 일의 이름으로 적어요("내비로 보내기").
  • 아래 줄 버튼은 결과를 적어요("2곳 추가").

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.