Tab

관련된 콘텐츠를 그룹화하고, 한 번에 하나의 콘텐츠만 표시하는 네비게이션 요소입니다. 제한된 공간에서 여러 정보를 효율적으로 구성할 때 사용하며, 사용자가 콘텐츠 간 빠르게 전환할 수 있도록 돕습니다.

Design

Web

iOS

Android

Anatomy

1. Selection indicator
2. Active tab
3. Inactive tab
4. Icon button

StatesWeb only

Size

모든 플랫폼에서 Medium이 기본 사이즈입니다. 모든 요소의 간격 및 텍스트 사이즈는 임의로 조절할 수 없으며 UX 의도에 따라서 다양한 사이즈를 선택하여 사용할 수 있습니다.

Resize

Fill

정해진 너비 안에서 Tab button을 균일한 너비로 나누어 사용합니다. 사용자에게 스크롤 없이도 모든 콘텐츠를 탐색할 수 있도록 명확성을 제공해야할 때 사용하며 Label의 너비가 대략적으로 균일할 때 사용하는 것을 권장합니다.

Hug

왼쪽부터 Tab이 차례대로 위치하며 스크롤을 통해 다양한 길이의 Label을 조화롭게 보여줄 수 있습니다. 스크롤이 발생할 때 Label이 걸쳐지게 설계하여 영역 밖에도 콘텐츠가 있다는 것을 암시할 수 있도록 합니다.

Horizontal padding

Horizontal padding=True: 횡스크롤 시 맨 끝 좌측, 우측에 기본 여백을 확보합니다.
Horizontal padding=False: 요소를 감싸는 Container가 여백을 포함하고 있을 경우 해당 옵션을 사용하지 않습니다.

Horizontal scroll

Top fixed

Navigation의 Toolbar를 활용하여 Tab을 상단에 고정할 시 Padding 옵션을 활성화합니다. 횡 스크롤 시 그라디언트가 적용되지 않습니다.(Tab과 Category는 동일한 구조를 가지고 있습니다.)

Icon button

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

Usage

Divider

Top navigation의 Toolbar에 Tab을 배치할 시 Tab의 Divider가 아닌 Top navigation의 구분선이 적용됩니다.

Sticky

상단에 탭을 고정시켜 배치할 때에는 스크롤 시에 Navigation bar를 숨겨 화면을 효율적으로 활용합니다.

Hierarchy

Tab

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

Level.1 → 탭의 하위에서 세부적으로 한번 더 콘텐츠를 구분합니다.

Accessibility

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

How to use

첫 번째 탭을 화면의 항상 기본 값으로 유지합니다.

Don’t

너무 긴 Label을 사용하지 않습니다.

Tab