Bottom sheets

Basic principles

Supporting

화면의 주요 UI 영역을 보조하는 콘텐츠를 담고있습니다.

Flexible

Bottom sheets에는 다양한 콘텐츠와 레이아웃을 담을 수 있습니다.

Ergonomic

모바일 디바이스에서 쉽게 터치할 수 있는 자리에 위치합니다.

Anatomy

Sheet Contents Scrim (Modal 인 경우에만)

Types

Modal Type

Bottom sheet에서 작업을 완료하거나 취소하기 전까지 다른 UI는 scrim으로 막아 기존 화면의 작업을 할 수 없습니다.

Interactive Type

Bottom sheet의 작업이 완료되지 않아도 기존 화면과 인터랙션 할 수 있습니다.

Behavior

Bottom sheet는 다음의 경우 닫힐 수 있습니다.
 : Bottom sheet 내의 메뉴 아이템이나 액션을 선택
 : Scrim (음영) 영역 선택 
: Sheet를 하단으로 스와이프 
: Bottom sheet의 Top app bar 에 있는 ‘닫기' 버튼 선택

Bottom sheet 닫기 - 음영영역 터치

Scrim (음영 영역) 선택 시, bottom sheet 작동은 앱 내 동일해야합니다.

Don’t

Scrim 터치 시 일부 화면에서만 bottom sheet이 닫히도록 하면, scrim 터치로 닫힘을 지원하지 않는 화면에서 사용자가 불필요한 터치 액션을 하게됩니다. 터치로 닫히는 동작은 앱 내 모든 화면에 동일하게(일괄 적용 혹은 일괄 미적용) 적용합니다.

Bottom sheet 닫기 - 스와이프

스와이프 시, bottom sheet 작동은 앱 내 동일해야합니다.

Don’t

스와이프 시 일부 화면에서만 bottom sheet이 닫히도록 하면, 작동하지 않는 화면에서 사용자가 불필요한 스와이프 액션을 하게됩니다. 스와이프로 닫히는 동작은 앱 내 모든 화면에 동일하게 적용합니다.

Bottom sheet 닫기 - Device back button 선택

Bottom sheet 이 올라온 상태에서 device back button 선택 시, bottom sheet 이 내려가도록 설계합니다.
Bottom sheet에서 수 차례 다시 bottom sheet으로 이동한 경우에는 이전 bottom sheet으로 이동하거나 처음 bottom sheet이 올라온 페이지로 이동합니다.

Don’t

Bottom sheet가 올라온 상태에서 device back button 선택 시 앱종료 안내 대신 sheet가 내려가도록합니다.

Bottom sheet 내 스크롤 - 힌트

Bottom sheet 내에 스크롤하여 추가적으로 확인해야할 콘텐츠가 있는 경우에는 UI component 일부를 경계에 걸치게 하여 힌트를 줍니다.

Caution

스크롤 전에는 추가적인 리스트가 있음을 알 수 없습니다.

Bottom sheet 내 UI component 일부를 경계에 걸치도록하여 추가적인 항목이 있음을 알 수 있습니다.

Bottom sheet 내 스크롤 - 기존 영역 처리

Bottom sheet에서 스크롤을 포함한 인터랙션 시, scrim 영역이나 기존 페이지는 영향을 받지 않습니다.

Don’t

Bottom sheet 상에서 이루어지는 인터랙션은 bottom sheet에만 영향을 미쳐야합니다. Bottom sheet 하단의 화면이 영향을 받지 않도록 막아야합니다.