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