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
Root of the Tabs compound component, which switches between related panels of content shown one at a time. Shares size, variant, orientation, and disabled with the parts inside it. Renders a <div> element.
| 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
Combines Tabs.ListPrimitive and Tabs.IndicatorPrimitive into a single part, with the indicator after the tab buttons. Use indicatorElement to replace the indicator. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
indicatorElement? | - | ReactElement<TabsIndicatorPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tabs.ListPrimitive
Container that groups the tab buttons and moves focus between them with the arrow keys. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Tabs.IndicatorPrimitive
Highlight that moves to the active tab, a line on the border of the list or a filled background depending on variant. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
renderBeforeHydration? | false | boolean |
render? | - | ReactElementfunction |
Tabs.Button
Button that activates the panel with the same value when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | - | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Tabs.Panel
Content area shown while the tab with the same value is active. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |