Header
화면의 상단에서 현재 페이지의 제목과 핵심 정보를 전달하는 영역입니다. 필요에 따라 뒤로가기, 닫기, 검색, 액션 버튼 등 주요 기능을 함께 배치할 수 있습니다.
컴포넌트 명세 (Component Specification)
구조 (Structure)
좌측과 우측의 secion으로 구분하여 용도에 따라 property를 추가하며 사용합니다.
분류 (Variant)
대부분의 화면에 사용되는 Default 헤더, 하단에 올라오는 Bottom Sheet 헤더, 파란 배경으로 편집 모드에서만 사용되는 blue가 있습니다.
사이즈 가이드 (Size Guide )
모든 Header의 너비는 화면의 너비와 맞게 Fill 처리되며 Header Default,Blue는 48px, Header Bottom Shet는 56px의 높이로 제공됩니다.
Use Case (사용 예시)
실제 서비스 화면에서 Header가 배치되고 활용되는 패턴입니다.
기본 헤더 (Header Default)
1Depth 화면에 사용되는 기본 헤더입니다.
서브 헤더 (Header Sub)
2Depth 이상의 화면에 사용되는 서브 헤더입니다.
바텀 시트 헤더 (Header Bottom Sheet)
아래에서 올라오는 Bottom Sheet에 사용되는 전용 헤더입니다.
검색 헤더 (Header Search)
헤더 내부에 Text Input이 배치되어 검색 기능을 제공합니다.
블루 헤더 (Header Blue)
편집 모드일 때 사용되는 파란색 배경의 헤더입니다.
기본 헤더 간격 (Header Default Gap)
Status Bar와 0px로 완전히 붙여서 사용합니다.
바텀 시트 헤더 간격 (Bottom Sheet Header Gap)
바텀 시트 내부의 하단 콘텐츠와 0px로 완전히 붙여서 사용합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
Home
Portfolio