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.List는 기본적으로 Tabs.IndicatorPrimitive를 포함합니다. Indicator를 커스터마이징하려면 indicatorElement prop을 사용하세요.

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...