Tab

여러 개의 콘텐츠 영역을 구분하여 사용자가 쉽게 전환할 수 있도록 하는 기능입니다. 일반적으로 탭은 수평 또는 수직으로 배열된 버튼 형태로 나타나며, 각 탭을 클릭하면 해당 탭에 연결된 콘텐츠가 표시됩니다. 탭은 정보의 구조를 명확하게 하고 페이지를 벗어나지 않고 섹션 별 콘텐츠를 둘러볼 수 있습니다.

Anatomy

Tab
Label
Divider
Container
Active indicator

Type

1.Primary tab(PC)
단독사용을 권장하며 여러 줄 사용 가능합니다. 각 tab으로 분류되는 항목의 개별 중요도가 높을 경우에만 사용합니다. 한 줄당 tab 3개 ~ 6개 이하 사용을 원칙으로 Tab width : Container 기준 1/n으로 합니다.
2.Primary tab(MO)
단독사용을 권장하며 여러 줄 사용 가능합니다. 각 tab으로 분류되는 항목의 개별 중요도가 높을 경우에만 사용합니다. 한 줄당 tab 3개 ~ 4개 이하 사용을 원칙으로 Tab width : Container 기준 1/n으로 합니다.
3.Title/Subtitle
단독사용/결합사용이 가능하며 여러 줄 사용 가능합니다.

Usage

Don’t

탭을 하나만 쓰는 것을 금지한다. 적어도 두 개의 탭이 사용되어야 합니다.

Don’t

tab width의 총합이 container width를 초과할 경우만 화면 기준 1/n로 사용합니다.