탭 패널은 동일 페이지 내에서 유사한 정보의 그룹화를 통해 콘텐츠를 구성하여 제공할 때 사용합니다.
Usage
페이지 내에서 콘텐츠를 그룹화하여 배치하거나 하위 뎁스의 메뉴를 현재 페이지에서 묶어 제공할 때 사용합니다.
•
페이지 이동 없이 여러 분류 또는 그룹의 콘텐츠를 제공해야 할 때 사용합니다.
•
3depth 이하의 페이지에서 사용합니다.
•
탭으로 구성하는 그룹이나 메뉴가 4개 이하일 때 사용합니다.
•
기술협업 메뉴에서는 유동적인 탭 패널을 구성하여 사용합니다.
Anatomy
1.
현재 활성화된 탭을 스타일을 통해 강조합니다.
2.
사용자의 포커스 위치를 알릴 수 있도록 마우스 오버 스타일을 적용하여 사용합니다.
3.
콘텐츠 영역과 분명히 구분이 되도록 구분선 등을 표시합니다.
Variants
차수별로 진행하는 작업에 대한 데이터를 표시할 때는 유동적인 탭 패널을 구성하여 사용합니다.
1.
가장 최신 차수가 맨 앞에 위치합니다.
2.
각 탭 컨테이너에 레이블이 넘칠 경우 줄임 처리하여 표시합니다.
3.
화면에서 정한 최대 개수를 넘어설 경우, 나머지 차수를 볼 수 있도록 더보기 메뉴를 표시합니다.
4.
더보기 메뉴를 클릭하면 드롭다운 형태로 전체 차수를 노출합니다.
Guidelines
•
그룹이나 메뉴가 많은 경우에는 드롭다운 메뉴를 사용합니다.
•
모바일 대응을 위해 탭 메뉴가 5개 이상인 경우에는 1,024px 이하 화면에서 드롭다운 메뉴로 변경합니다.
•
탭 레이블은 명확한 의미를 가진 명사형으로 작성합니다.
•
각 탭의 내용은 다른 탭과 상호배타적인 독립적인 분류가 되어야 합니다. 유사한 내용을 각각 그룹화하여 탭 패널로 구분하여 제공하지 않습니다.
•
주 네비게이션으로 사용할 수 없습니다.
