Sheet
동의·필터·공유 같은 짧은 작업 시트.
- 출시 화면에서 사용
개요
미리보기
예시
상태
바닥 (휴대폰)
근거 묶음 공유
People with the link see only this evidence pack, never the original emails.
Discard what you’ve written?
If you close now, what you entered won’t be saved.가운데 (≥768)
근거 묶음 공유
People with the link see only this evidence pack, never the original emails.
Discard what you’ve written?
If you close now, what you entered won’t be saved.긴 본문
근거 묶음 공유
링크를 받은 사람은 이 근거 묶음만 볼 수 있어요. 원문 메일과 일정은 보이지 않고, 근거마다 출처 줄과 읽은 날짜가 함께 보여요. 링크는 30일 뒤에 저절로 끊기고, 그 전에 언제든 이 시트에서 끊을 수 있어요. 받은 사람이 링크를 다시 공유해도 같은 내용만 보여요.Discard what you’ve written?
If you close now, what you entered won’t be saved.바뀐 선택
근거 묶음 공유
People with the link see only this evidence pack, never the original emails.
Discard what you’ve written?
If you close now, what you entered won’t be saved.가장 긴 문구 (es)
Google Calendar 가져오기 범위 고르기
People with the link see only this evidence pack, never the original emails.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
쓰임 예
닫힘
근거 묶음 공유
People with the link see only this evidence pack, never the original emails.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
이렇게 · 이렇게 하지 않기
- 이렇게 짧은 작업에만 쓰고 긴 편집은 페이지로 연다. 닫기 버튼은 항상 있다.
- 이렇게 닫아도 계정이나 앞 단계가 사라지지 않는다. 바뀐 선택이 있으면 먼저 묻는다.
- 이렇게 하지 않기 기록 상세를 시트로 열지 않는다(SplitView). 끌어 닫기·스프링 튕김을 쓰지 않는다. 시트에 빛(Light)을 깔지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
open? | boolean | false | 열림. 카탈로그에서 켜면 무대 안에 비모달로 그린다. |
placement? | 'auto' | 'bottom' | 'center' | auto | auto는 768 아래 바닥, 768 이상 가운데. |
title | ReactNode | 근거 묶음 공유 | 짧은 작업 이름(h2). 열면 초점이 여기로 온다. |
children? | ReactNode | | 본문. 시트 높이는 최대 90vh이고 본문만 스크롤된다. |
footer? | ReactNode | — | 바닥 행동 묶음. |
dirty? | boolean | false | 바뀐 선택이 있으면 닫기 전에 묻고, 배경을 눌러도 닫히지 않는다. |
onOpenChange(open, reason) / initialFocus | — | — | Modal과 같다. ConsentSheet는 닫히면 “가져오기” 버튼으로 초점이 돌아간다. |
접근성
키보드: Esc = 닫기(바뀐 선택이 있으면 확인) · Tab은 안에 갇힌다 · 닫기 버튼이 항상 있다.
- <dialog aria-labelledby> + showModal(). 그래버는 장식(aria-hidden)이다.
- 바닥 시트는 자기 높이만큼 아래에서 올라온다(move). 동작 줄이기에서는 이동 없이 120ms 불투명도만.