Category

메인 카테고리 탭 아래에서 콘텐츠를 더욱 세분화하여 구분하는 하위 네비게이션 요소입니다. 사용자가 대분류에서 소분류로 자연스럽게 탐색할 수 있도록 돕고, 정보 구조를 명확하게 전달하는 역할을 합니다.

Design

Web

iOS

Android

Anatomy

1. Active chip
2. Inactive chip
3. Icon button

States

Size and gap

모든 플랫폼에서 Medium을 기본 사이즈로 둡니다. 간격 및 텍스트 사이즈는 임의로 조절할 수 없으며 다양한 사이즈를 선택하여 사용할 수 있습니다. Large, Xlarge는 데스트톱에서만 사용하는 것을 권장합니다.

Horizontal padding

Horizontal padding=True

횡스크롤 시 맨 끝 좌측, 우측에 기본 여백을 확보합니다.

Horizontal padding=False

요소를 감싸는 Container가 여백을 포함하고 있을 경우 해당 옵션을 사용하지 않습니다.

Vertical padding

Vertical padding=True

요소가 상단에 Fixed될 시 기본 상, 하 여백을 확보합니다.

Vertical padding=False

요소를 감싸는 Container가 있을 때 Container의 Padding을 상속 받기 때문에 활용하지 않습니다.

Horizontal scroll

Top fixed

Navigation의 Toolbar를 활용하여 Tab을 상단에 고정할 시 Padding 옵션을 활성화합니다. 횡스크롤 시 그라디언트가 적용되지 않습니다.

In container

Category가 어떠한 Container 요소 내부에 위치할 시 Padding 옵션을 비활성화하며, 횡스크롤 시 그라디언트가 적용됩니다.

Icon button

필터, 키워드 입력 등 유저의 편의성 및 행동을 유도하는 요소를 위치시킬 수 있습니다. Icon button은 횡스크롤 시 고정됩니다.

Usage

Solid

최상단 카테고리를 구분하는 용도로 사용할 시 주목도가 높은 Solid 타입 사용을 권장합니다.

Outlined

화면 전체가 아닌 일부 Section의 카테고리를 변경할 때 사용합니다. Horizontal, Vertical padding의 옵션을 모두 비활성화하여 사용합니다.

Hierarchy

Level.2 → 화면의 최상단 영역에서 내려지는 콘텐츠를 구분합니다.

Level.1 → 일정 영역, 카드 등 일부 영역의 콘텐츠를 구분합니다.

Accessibility

Key	Description
`ArrowRight`	다음 요소로 값을 변경합니다. (Category 내부에서 순환)
`ArrowLeft`	이전 요소로 값을 변경합니다. (Category 내부에서 순환)
`Home` `PageUp`	첫 번째 요소로 포커스를 이동합니다.
`End` `PageDown`	마지막 요소로 포커스를 이동합니다.
`Enter`	현재 포커스된 요소를 클릭합니다.

How to use

탭의 하위 카테고리를 한번 더 구분할 때에는 Solid 타입 사용을 권장합니다.

Don’t

다른 타입의 카테고리를 연달아 배치하여 사용하지 않습니다.