Tabs Menu
Tabs Menu는 콘텐츠 및 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 탭 아이템(Tab Item)을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다.
Tabs Menu
Tabs Menu는 콘텐츠 및 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 탭 아이템(Tab Item)을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다.
Tabs Menu
Tabs Menu는 콘텐츠 및 페이지를 구분하여 명확하게 보여주기 위해 여러 개의 탭 아이템(Tab Item)을 조합하여 사용하는 컴포넌트입니다. 각 탭 아이템은 사용자의 클릭으로 선택 상태가 되며, 하나의 아이템은 반드시 선택된 상태(selected)로 표시되어야 합니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다.
OPTIONAL
2. 디바이더
현재 활성화된 Tab Item을 시각적으로 표시하고 Tab Menu를 아래 요소와 구분하는 역할을 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다.
OPTIONAL
2. 디바이더
현재 활성화된 Tab Item을 시각적으로 표시하고 Tab Menu를 아래 요소와 구분하는 역할을 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다.
Anatomy
ESSENTIAL
1. 레이블
각 Tab Item을 구분하는 텍스트입니다.
OPTIONAL
2. 디바이더
현재 활성화된 Tab Item을 시각적으로 표시하고 Tab Menu를 아래 요소와 구분하는 역할을 합니다.
3. 카운트
Tab Item에 포함된 항목 수를 나타내는 숫자입니다.
State
Control
count
divider
Control
count
divider
Control
count
divider
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Spec
 | Spacing각 아이템의 우측에 여백을 포함하고 |
Spec
Spacing
각 아이템의 우측에 여백을 포함하고 조합 간격은 0px로 설정합니다.
Spec
| Spacing각 아이템의 우측에 여백을 포함하고 |
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.