BottomSheet
원본: projects/skill-lens/design/components/BottomSheet/README.md
상태: In Progress, 접근성 △(포커스 가두기는 코드 쪽), 다크 ✓, 코드 ✗
바텀시트: 손잡이, 제목, 목록, 하단 CTA
화면을 떠나지 않고 세부를 보거나 고치는 시트입니다. 원본은 8판 .sheet: PC는 오른쪽, 폰은 아래.
쓰는 곳
직무시트, 스킬셋 보기, 파일 읽은 결과, 메일 미리 보기, 폰의 선택 목록.
구성(화면이 넘겨줄 것)
제목, 한 줄 설명, 본문, 버튼(sl-sheet__foot), 닫기.
규칙
- PC(
sl-sheet--side): 오른쪽 520 전체 높이, 왼쪽 1px 선 + 왼쪽 그림자, 안쪽 24 사이 16. 폰에서는 아래 72% 시트가 됩니다. - 폰(
sl-sheet): 아래, 위 둥글기 18, 손잡이. - 버튼은 아래 오른쪽, 사이 10. 뒤는
scrim(먹색 35%). - 시트 안에 시트를 열지 않습니다.
접근성
role="dialog",aria-modal="true", 제목을aria-labelledby로. 손잡이의 누름 영역은 64×44.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.