Vega Logo
v1.0.0
Tab
탭(tab)은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트입니다.
콘텐츠 섹션은 동일한 영역 내에서 전환되기 때문에 정보를 탐색하는 맥락을 유지할 수 있고 작은 공간에 많은 양의 콘텐츠를 효과적으로 표현할 수 있습니다.
Type

넓이 Fit

넓이 Full

Anatomy
  1. 선택된 탭 레이블
  2. 탭 레이블
  3. 선택된 인디케이터 : 탭이 선택된 상태임을 알려주는 시각적인 식별자
  4. 구분선
State
탭 아이템의 각 상태를 나타냅니다.

Unselect

Select

Hover

Disable

Size
탭의 사이즈는 sm / md / lg 3가지를 사용합니다.

넓이 Fit

넓이 Fit

넓이 Fit

사용 가이드
탭 사용
Don’t
탭은 콘텐츠를 숨겨둔 상태에서 사용자가 콘텐츠의 표시 여부를 선택해야 하기 때문에 사용자의 인지적 부담을 더욱 증가시킬 수 있어 여러 개의 탭을 중첩하는 것은 바람직하지 않습니다.
Don’t
탭 레이블에 너무 긴 텍스트를 사용하지 않습니다.