Skip to Content

Tabs Usage

사용자가 물리적으로 페이지를 이동하지 않고 관련된 다른 정보를 볼 수 있도록 합니다.

Hierarchy

Tabs는 타입 별로 사용 패턴에서 위계가 부여됩니다. 많은 정보가 배치되는 복잡한 구조의 인터페이스에서도 사용자가 정보의 계층구조를 쉽게 파악할 수 있도록 하는 것이 중요합니다.

TypeUsagePosition
Line tabsPage 또는 pane navigationAction bar와 같은 header 성격의 컴포넌트 내부
Panel title과 같은 title 성격의 영역
Contained tabsSection navigationPage 내부
Panel content 영역 내부
✓DoRequired

콘텐츠 위계에 기반하여 tabs의 타입을 올바르게 사용합니다.

✕Don'tRequired

위계에 맞지 않는 구성으로 tabs 타입을 사용하지 않습니다.

Layout

Placement

Tab을 horizontal 또는 vertical direction으로 배치하여 사용할 수 있습니다.

Sizing

Horizontal direction으로 정렬된 경우 tab의 너비는 일괄적으로 동일한 값으로 적용되거나 각 tab의 콘텐츠 길이에 맞추어질 수 있습니다. 단, vertical direction으로 정렬된 경우에는 tab의 너비는 항상 동일한 값으로 적용되어야 합니다.

Tabs Layout Sizing

Tabs Layout Sizing