Tab
Tab은 동일한 맥락의 콘텐츠를 구분하고 전환하기 위한 내비게이션 컴포넌트입니다.
개별 Tab Segment를 조합하여 구성되며, 선택 Segment에 따라 서로 다른 콘텐츠 영역을 표시합니다.
컴포넌트 명세 (Component Specification)
Anatomy
tabs
tabSegment
기본 기능
동일한 맥락의 콘텐츠를 구분하고 전환하기 위한 내비게이션 컴포넌트
시각 옵션
line
solid
상태
inactive
active
내부 구성
text
stroke
Tab Segment 분류 (Variant)
Tab Segment는 Active와 Inactive 상태로 구분되며, 선택된 탭에 따라 서로 다른 콘텐츠를 보여줍니다.
Tab 분류 (Variant)
Tab은 Line과 Solid 타입으로 구분되며, 화면 구조와 강조 정도에 따라 적절한 형태로 사용할 수 있습니다.
사이즈 가이드 (Size Guide )
Line Tab은 Medium 한 가지 사이즈로 제공되며, Solid Tab은 Medium과 Small 두 가지 사이즈로 구분되어 사용 목적과 화면 구성에 맞게 활용할 수 있습니다.
사용 예시 (Use Case)
Tab은 상단 헤더 아래에 배치되며, 헤더와는 16px의 간격을 두고 사용합니다. 화면 좌우에는 각각 16px의 여백을 두고 중앙 정렬하여 배치합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
Home
Portfolio