Tabs

Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.

Property


Size

Tabs의 크기를 지정합니다. sm, md, lg, xl 네 가지 크기를 제공합니다.

Variant

Tabs의 스타일 변형을 설정합니다. linefill 두 가지 스타일을 제공합니다.

Orientation

수평(horizontal)과 수직(vertical) 방향을 설정합니다.

Controlled State

Tabs의 활성 상태를 외부에서 제어합니다.

States

개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다.

Examples


Keyboard Navigation

activateOnFocusloopFocus props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다.

Custom Indicator

Tabs.ListPrimitiveTabs.IndicatorPrimitive를 직접 조합하면 인디케이터의 스타일을 제어할 수 있습니다.

Props Table


Tabs.Root

Loading component documentation...

Tabs.List

Loading component documentation...

Tabs.ListPrimitive

Loading component documentation...

Tabs.IndicatorPrimitive

Loading component documentation...

Tabs.Button

Loading component documentation...

Tabs.Panel

Loading component documentation...

On this page