Tabs

포커스와 실행 방식을 조정하며 같은 단계의 패널을 전환합니다.

용법

직접 선택

탭 사이에서 포커스만 옮기고 확정할 때 패널을 바꿉니다.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

자동 전환

자동으로 다음 항목으로 이동하면서 일시 정지와 직접 이동 기능도 제공합니다.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

세로 방향 비활성 항목

활성 작업을 따라 세로로 이동합니다.

Panels stay mounted. Arrow keys either activate immediately or wait for Enter and Space.

Overview

Release health and deployment summary.

API

Vue 패키지: @sectile/vue/tabs

컴포넌트

• TabsRoot
• TabsList
• TabsTrigger
• TabsContent
• TabsIndicator

Props

TabsRootProps

activationMode

타입TabsActivationMode기본값'automatic'

포커스 이동만으로 탭을 열지, 명시적으로 확정할 때 열지 정합니다.

as

타입PrimitiveAs기본값'div'

이 파트가 렌더링할 요소 또는 컴포넌트입니다.

asChild

타입boolean기본값false

하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

defaultValue

타입string기본값''

컴포넌트가 값을 관리할 때 사용할 초깃값입니다.

disabled

타입boolean기본값false

사용자 조작을 막을지 여부입니다.

disabledItems

타입readonly string[]기본값[]

포커스와 선택 대상에서 제외할 항목 값입니다.

items

타입readonly string[]기본값필수

컴포넌트가 관리할 순서 있는 항목 값입니다.

modelValue

타입string기본값undefined

부모가 상태를 관리할 때 사용할 현재 값입니다.

orientation

타입'horizontal' | 'vertical'기본값'horizontal'

배치와 키보드 이동에 사용할 축입니다.

readonly

타입boolean기본값false

값 확인만 허용하는 읽기 전용 상태 여부입니다.

TabsListProps

as

타입PrimitiveAs기본값'div'

이 파트가 렌더링할 요소 또는 컴포넌트입니다.

asChild

타입boolean기본값false

하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

label

타입string기본값undefined

보조 기술이 읽는 컨트롤 이름입니다.

TabsTriggerProps

as

타입PrimitiveAs기본값'button'

이 파트가 렌더링할 요소 또는 컴포넌트입니다.

asChild

타입boolean기본값false

하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

disabled

타입boolean기본값false

사용자 조작을 막을지 여부입니다.

value

타입string기본값필수

이 계약이 노출하는 현재 값입니다.

TabsContentProps

as

타입PrimitiveAs기본값'div'

이 파트가 렌더링할 요소 또는 컴포넌트입니다.

asChild

타입boolean기본값false

하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

value

타입string기본값필수

이 계약이 노출하는 현재 값입니다.

TabsIndicatorProps

as

타입PrimitiveAs기본값'span'

이 파트가 렌더링할 요소 또는 컴포넌트입니다.

asChild

타입boolean기본값false

하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

TabsRootSlotProps

disabled

타입boolean

사용자 조작을 막을지 여부입니다.

highlightedValue

타입string | null

조작 대상으로 강조된 현재 값입니다.

readonly

타입boolean

값 확인만 허용하는 읽기 전용 상태 여부입니다.

value

타입string

이 계약이 노출하는 현재 값입니다.

TabsTriggerSlotProps

disabled

타입boolean

사용자 조작을 막을지 여부입니다.

highlighted

타입boolean

조작 대상으로 강조된 항목인지 여부입니다.

selected

타입boolean

현재 선택된 항목인지 여부입니다.

value

타입string

이 계약이 노출하는 현재 값입니다.

TabsContentSlotProps

selected

타입boolean

현재 선택된 항목인지 여부입니다.

value

타입string

이 계약이 노출하는 현재 값입니다.

이벤트

TabsRoot

activate

페이로드string

항목이 활성화될 때 발생합니다.

highlight

페이로드string | null

강조된 항목이 바뀔 때 발생합니다.

update:modelValue

페이로드string

컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

TabsActivationMode

type TabsActivationMode = 'automatic' | 'manual'

TabsValueChangeHandler

type TabsValueChangeHandler = (value: string) => void

TabsHighlightHandler

type TabsHighlightHandler = (value: string | null) => void

TabsActivateHandler

type TabsActivateHandler = (value: string) => void

파트

공통 범위: [data-scope="tabs"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
root	[data-part="root"]	컴포넌트 경계와 내부 파트를 묶습니다.	—
list	[data-part="list"]	컴포넌트 항목을 탐색 순서대로 묶습니다.	—
trigger	[data-part="trigger"]	연결된 콘텐츠를 열고 닫거나 활성화합니다.	—
indicator	[data-part="indicator"]	주요 콘텐츠와 나란히 상태나 위치를 표시합니다.	—
content	[data-part="content"]	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—

키보드 동작

키	동작
Arrow Left / Arrow Right	가로 탭 목록에서 탭 사이를 이동합니다.
Arrow Up / Arrow Down	세로 탭 목록에서 탭 사이를 이동합니다.
Home / End	첫 번째 또는 마지막 탭으로 이동합니다.
Enter / Space	직접 실행 모드에서 포커스된 탭을 엽니다.

접근성

탭 목록이 각 탭을 하나의 탭 패널과 연결하고 선택·비활성·방향 상태를 유지합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.