Tabs
Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.Property
Size
Tabs의 크기를 지정합니다. sm, md, lg, xl 네 가지 크기를 제공합니다.
Variant
Tabs의 스타일 변형을 설정합니다. line과 fill 두 가지 스타일을 제공합니다.
Orientation
수평(horizontal)과 수직(vertical) 방향을 설정합니다.
Controlled State
Tabs의 활성 상태를 외부에서 제어합니다.
States
개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다.
Examples
Keyboard Navigation
activateOnFocus와 loopFocus props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다.
Custom Indicator
Tabs.ListPrimitive와 Tabs.IndicatorPrimitive를 직접 조합하면 인디케이터의 스타일을 제어할 수 있습니다.
Props Table
Tabs.Root
관련된 콘텐츠 패널을 한 번에 하나씩 전환해 보여 주는 Tabs 복합 컴포넌트의 루트. size, variant, orientation, disabled를 내부 파트와 공유합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
variant? | line | linefill |
defaultValue? | 0 | any |
onValueChange? | - | function |
value? | - | any |
className? | - | stringfunction |
disabled? | - | boolean |
style? | - | React.CSSPropertiesfunction |
activateOnFocus? | false | boolean |
loopFocus? | true | boolean |
orientation? | horizontal | horizontalvertical |
render? | - | ReactElementfunction |
Tabs.List
Tabs.ListPrimitive와 Tabs.IndicatorPrimitive를 하나의 파트로 합치며, 인디케이터는 탭 버튼 뒤에 둡니다. 인디케이터를 대체하려면 indicatorElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
indicatorElement? | - | ReactElement<TabsIndicatorPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tabs.ListPrimitive
탭 버튼을 묶고 화살표 키로 버튼 사이에서 포커스를 옮기는 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tabs.IndicatorPrimitive
활성 탭으로 이동하는 강조 표시. variant에 따라 목록 테두리의 선 또는 채워진 배경으로 나타납니다. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
renderBeforeHydration? | false | boolean |
render? | - | ReactElementfunction |
Tabs.Button
클릭하면 같은 value를 가진 패널을 활성화하는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | - | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Tabs.Panel
같은 value를 가진 탭이 활성화되어 있는 동안 표시되는 콘텐츠 영역. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |