Tabs

Jul 2

Written By Heesun .

GUIDE

Tabs는 페이지 내 유사한 정보를 그룹핑하여 콘텐츠의 카테고리를 분류/정리할 때 사용합니다.

ANATOMY

각각의 탭 목록을 상징적으로 분류하고 싶을 경우 선택적으로 사용합니다.
해당 Tab에 대한 내용을 단일 행으로 표현하는 영역입니다. 선택된 Tab의 경우 두께, 색상의 변경을 통해 강조됩니다.
해당 Tab에 새로운 컨텐츠가 발생하고 사용자가 이를 확인해보지 않은 경우 업데이트 소식을 표시하는 영역입니다.
활성 탭과 비활성 탭을 구분하기 위해 다른 색상을 적용할 수 있습니다.

SIZE

Tabs의 사이즈는 아래와 같습니다.

STATES

Tabs의 상태별 정의는 다음과 같습니다.

USAGE

Underline type

밑줄 타입의 탭은 동일한 페이지 내의 컨텐츠를 카테고리 별로 구분하는 목적으로 사용합니다.
탭은 일렬로 나열되나, mobile 화면에서 가로 영역을 초과할 경우 scrollable 상태로 변합니다.
탭 버튼 간의 기본 간격은 0px로 조정 불가능합니다.

Box type

박스 타입의 탭은 콘텐츠를 필터링 목적으로 구분하고자 할 때 사용합니다.
탭은 일렬로 나열되나, mobile 화면에서 가로 영역을 초과할 경우 scrollable 상태로 변합니다.
탭 버튼 간의 기본 간격은 4~8px로 조정 가능합니다.

PLACEMENT

width

탭이 나열된 행에 지나치게 넓은 여백을 두지 않습니다. 
여백 공간에 (borderline) 컴포넌트로 대체합니다.

탭이 한 화면에 전부 들어갈 수 없는 경우  디바이스 환경과 무관하게 탭 내에서 좌우 스크롤을 지원합니다.
탭 선택 시 활성된 탭이 화면에 완전히 나타나도록 위치가 변경됩니다.
레이블이 두줄로 나뉘지 않습니다.
탭은 단일 행으로 표시됩니다.

selection
탭은 한 번에 하나씩만 활성화 할 수 있습니다.

Acordion

Pagination