Control Bar
필터, 정렬, 보기 방식 전환처럼 화면의 내용을 조작하는 기능을 모아둔 영역입니다.
주로 Header 아래에 배치되며, 사용자가 원하는 방식으로 콘텐츠를 빠르게 탐색할 수 있도록 돕습니다.
컴포넌트 명세 (Component Specification)
구조 (Structure)
좌측과 우측의 secion으로 구분하여 용도에 따라 property를 추가하며 사용합니다.
분류 (Variant)
흰색 배경에서의 구분을 고려해 Solid와 Line으로 구분됩니다.
사이즈 가이드 (Size Guide )
모든 Control Bar는 화면 너비에 맞춰 Fill로 설정되며, Solid는 48px, Line은 44px 높이로 사용됩니다.
Use Case (사용 예시)
실제 서비스 화면에서 Control Bar가 배치되고 활용되는 패턴입니다.
기본 컨트롤 바 (Control Bar Default)
필터, 정렬, 보기 방식 전환처럼 화면의 내용을 조작할 수 있는 기능이 있습니다.
날짜 컨트롤 바 (Control Bar Date)
캘린더, 날짜별 조회 등 날짜 표시가 필요한 부분에 헤더 바로 하단에 붙어서 사용됩니다.
댓글 컨트롤 바 (Control Bar Comment)
게시글과 댓글을 구분하는 영역에 해당 Control Bar가 적용됩니다.
컨트롤 바 사용 예시 (Control Bar Use Case)
헤더와 콘텐츠 사이의 영역에 해당 Control Bar가 적용됩니다.
댓글 컨트롤 바 사용 예시 (Control Bar Comment Use Case)
게시글과 댓글을 구분하는 영역에 해당 Control Bar가 적용됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
