바텀시트

모바일에서 선택지를 잠깐 보여줄 때. 데스크톱에서는 가운데 카드로 자동 전환됩니다.

코드

<div class="jt-sheet-dim">
  <div class="jt-sheet" role="dialog" aria-modal="true" aria-label="정렬 기준">
    <span class="jt-sheet-grip"></span>
    …
  </div>
</div>

하지 말 것

• 딤을 진하게 만들지 마세요. 바텀시트는 뒤가 보여야 맥락이 유지됩니다 — --color-dim-weak(.24)가 기본입니다.

접근성

• 모달과 같은 규칙 — 포커스 이동·Esc 닫기를 JS로 처리
• env(safe-area-inset-bottom)으로 홈바를 피합니다

앱에서 모양 바꾸기

이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.

관련