Tabs

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

같은 컨텍스트에서 관련 패널을 전환하세요. 선택된 탭은 전체 둥근 표면으로 표시됩니다. Panel.keepMounted를 설정해 입력을 보존하세요.

탭 상태로 별도 페이지 사이의 내비게이션을 흉내 내지 마세요. 대신 링크를 사용하세요. 화살표 키 포커스에 느린 콘텐츠를 로드하지 마세요. 기본 수동 활성화를 유지하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Tabs.Root → List(Tab + Indicator) + value-matched Panels

키보드와 접근성

Tab은 활성 탭으로 포커스를 이동합니다. 화살표 키, Home, End는 탭 사이를 이동합니다. 기본 수동 모드에서는 Enter나 Space가 포커스된 탭을 활성화합니다. List.activateOnFocus=true에서는 탭이 포커스를 받으면 활성화됩니다. 비활성 탭은 포커스를 받지만 활성화되지는 않습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Tabs } from '@surflane/ui'

<Tabs.Root defaultValue='overview'>
  <Tabs.List aria-label='Deployment sections'>
    <Tabs.Tab value='overview'>Overview</Tabs.Tab>
    <Tabs.Tab value='logs'>Logs</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value='overview' keepMounted>
    Overview details
  </Tabs.Panel>
  <Tabs.Panel value='logs' keepMounted>
    Build logs
  </Tabs.Panel>
</Tabs.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰