Tabs
Tabs
Tabs
Tabs은 콘텐츠와 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 Tab Item을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다. 여러 항목이 있는 경우에는 방향키 또는 Tab 키로 옵션 간 이동이 가능해야 합니다.
Tabs
Tabs은 콘텐츠와 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 Tab Item을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다. 여러 항목이 있는 경우에는 방향키 또는 Tab 키로 옵션 간 이동이 가능해야 합니다.
Tabs
Tabs은 콘텐츠와 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 Tab Item을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다. 여러 항목이 있는 경우에는 방향키 또는 Tab 키로 옵션 간 이동이 가능해야 합니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다. Tab에 연결된 콘텐츠의 성격을 명확하게 표현해야 합니다.
OPTIONAL
2. 언더라인
현재 활성화된 Tab Item을 시각적으로 표시하는 강조선입니다. Tab 아래 콘텐츠 영역 사이를 구분하는 역할도 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다. 작성 글, 수강한 강의 수, 획득한 배지 개수 등 정량 정보가 있을 때 사용합니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다. Tab에 연결된 콘텐츠의 성격을 명확하게 표현해야 합니다.
OPTIONAL
2. 언더라인
현재 활성화된 Tab Item을 시각적으로 표시하는 강조선입니다. Tab 아래 콘텐츠 영역 사이를 구분하는 역할도 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다. 작성 글, 수강한 강의 수, 획득한 배지 개수 등 정량 정보가 있을 때 사용합니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다. Tab에 연결된 콘텐츠의 성격을 명확하게 표현해야 합니다.
OPTIONAL
2. 언더라인
현재 활성화된 Tab Item을 시각적으로 표시하는 강조선입니다. Tab 아래 콘텐츠 영역 사이를 구분하는 역할도 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다. 작성 글, 수강한 강의 수, 획득한 배지 개수 등 정량 정보가 있을 때 사용합니다.
State
State
State
Properties
State | default, hover |
Color | gray, purple |
Size | L,M,S |
Selected | false, true |
Count | false, true |
Icon-left | false, true |
Icon-right | false, true |
Underline | false, true |
Properties
State | default, hover |
Color | gray, purple |
Size | L,M,S |
Selected | false, true |
Count | false, true |
Icon-left | false, true |
Icon-right | false, true |
Underline | false, true |
Properties
State | default, hover |
Color | gray, purple |
Size | L,M,S |
Selected | false, true |
Count | false, true |
Icon-left | false, true |
Icon-right | false, true |
Underline | false, true |
Spec
 | Spacing각 Tab Item의 우측에 여백을 포함하고 조합 간격은 0px로 설정합니다. |
Spec
Spacing
각 Tab Item의 우측에 여백을 포함하고 조합 간격은 0px로 설정합니다.
Spec
| Spacing각 Tab Item의 우측에 여백을 포함하고 조합 간격은 0px로 설정합니다. |
Usage
Do
기본 Tab은 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
Tab 레이블은 2줄로 변하지 않도록 간결하게 작성해야 합니다.
Usage
Do
기본 Tab은 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
Tab 레이블은 2줄로 변하지 않도록 간결하게 작성해야 합니다.
Usage
Do
기본 Tab은 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
Tab 레이블은 2줄로 변하지 않도록 간결하게 작성해야 합니다.