Bottom Sheet
Bottom Sheet 컴포넌트는 화면 하단에서 위로 올라오는 형태로, 사용자에게 빠르게 정보를 전달하거나 액션을 유도할 때 사용합니다.
Bottom Sheet
Bottom Sheet 컴포넌트는 화면 하단에서 위로 올라오는 형태로, 사용자에게 빠르게 정보를 전달하거나 액션을 유도할 때 사용합니다.
Bottom Sheet
Bottom Sheet 컴포넌트는 화면 하단에서 위로 올라오는 형태로, 사용자에게 빠르게 정보를 전달하거나 액션을 유도할 때 사용합니다.
Anatomy
ESSENTIAL
1. 백드롭
반투명 배경으로, 사용자가 바텀시트 외부를 터치했을 때 닫히도록 동작합니다.
2. 바디
주요 콘텐츠 영역으로, 텍스트·리스트·폼 등 다양한 정보를 담을 수 있습니다.
OPTIONAL
3. 헤더
타이틀과 닫기 버튼이 포함된 영역으로, 현재 시트를 쉽게 인지하고 닫을 수 있도록 합니다
4. 푸터
버튼이나 추가 액션이 필요한 경우에만 사용합니다. 시트 하단에 위치하며, 주요 행동(예: 확인, 저장)을 전달합니다.
Anatomy
ESSENTIAL
1. 백드롭
반투명 배경으로, 사용자가 바텀시트 외부를 터치했을 때 닫히도록 동작합니다.
2. 바디
주요 콘텐츠 영역으로, 텍스트·리스트·폼 등 다양한 정보를 담을 수 있습니다.
OPTIONAL
3. 헤더
타이틀과 닫기 버튼이 포함된 영역으로, 현재 시트를 쉽게 인지하고 닫을 수 있도록 합니다
4. 푸터
버튼이나 추가 액션이 필요한 경우에만 사용합니다. 시트 하단에 위치하며, 주요 행동(예: 확인, 저장)을 전달합니다.
Anatomy
ESSENTIAL
1. 백드롭
반투명 배경으로, 사용자가 바텀시트 외부를 터치했을 때 닫히도록 동작합니다.
2. 바디
주요 콘텐츠 영역으로, 텍스트·리스트·폼 등 다양한 정보를 담을 수 있습니다.
OPTIONAL
3. 헤더
타이틀과 닫기 버튼이 포함된 영역으로, 현재 시트를 쉽게 인지하고 닫을 수 있도록 합니다
4. 푸터
버튼이나 추가 액션이 필요한 경우에만 사용합니다. 시트 하단에 위치하며, 주요 행동(예: 확인, 저장)을 전달합니다.
State
Control
header
footer
Control
header
footer
Control
header
footer
Properties
header | false, true | |||||
footer | false, true | |||||
Properties
header | false, true | |||||
footer | false, true | |||||
Properties
header | false, true | |||||
footer | false, true | |||||
Spec
 | Width모바일 환경에서는 뷰포트의 100%로 설정합니다. |
 | Responsive Behavior콘텐츠 양이 많을 경우 Body 영역 내에서 |
Spec
Width
모바일 환경에서는 뷰포트의 100%로 설정합니다.
Responsive Behavior
콘텐츠 양이 많을 경우 Body 영역 내에서 스크롤이 가능합니다.
Spec
| Width모바일 환경에서는 뷰포트의 100%로 설정합니다. |
| Responsive Behavior콘텐츠 양이 많을 경우 Body 영역 내에서 |
Usage
Do
헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.
Do
1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.
Don't
다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.
Usage
Do
헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.
Do
1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.
Don't
다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.
Usage
Do
헤더의 닫기 버튼(close)을 항상 제공하여 사용자가 언제든지 닫을 수 있게 합니다.
Do
1개만 선택이 가능한 경우에는 [적용하기] 버튼 없이 바로 적용할 수 있습니다.
Don't
다중 선택의 경우 [적용하기] 버튼을 없애면 안됩니다.