메인 콘텐츠로 건너뛰기

Tabs 탭

탭 전환 컴포넌트입니다. 제어 / 비제어, 카드 / 라인 두 가지 외형, 탭 닫기와 추가, 완전한 키보드 내비게이션을 지원합니다.

기본 사용법​

기본 사용법
수묵이 번지며, 운치가 생동합니다.
공필로 정밀하게 그려, 세밀한 부분까지 다 드러납니다.
import { useState } from 'react'
import { LhTabs, LhTabPane } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhTabs value={value} onChange={(name) => setValue(name)}>
      <LhTabPane name="ink" label="수묵">
        수묵이 번지며 생동감이 감돕니다.
      </LhTabPane>
      <LhTabPane name="danqing" label="단청">
        단청 채색이 금빛으로 빛납니다.
      </LhTabPane>
    </LhTabs>
  )
}

Tabs Props​

프로퍼티설명타입옵션기본값
value현재 활성 탭의 name(제어형)string——
defaultValue현재 활성 탭의 name(비제어 기본값)string——
type외형'line' | 'card'—'line'
closable탭 닫기 허용 여부boolean—false
addable추가 버튼 표시 여부boolean—false
tabPosition탭 위치'top' | 'bottom'—'top'
sx간편 레이아웃 프로퍼티SxProps——

TabPane Props​

프로퍼티설명타입기본값
name탭의 고유 식별자(안정적인 키로 사용, 동적 수정은 권장하지 않음)string—
label탭 제목ReactNode—
disabled비활성화 여부booleanfalse
children탭 콘텐츠ReactNode—

Tabs 이벤트​

이벤트설명콜백 시그니처Vue 대응
onChange활성 탭이 변경될 때 발생(name: string) => void@change
onRemove탭을 닫을 때 발생(탭의 표시 / 숨김은 비즈니스 측이 제어)(name: string) => void@remove
onAdd추가 버튼 클릭 시 발생() => void@add
제어 / 비제어

value를 전달하면 제어형, defaultValue를 전달하면 비제어 내부 상태를 사용합니다. 두 모드 모두 onChange가 발생합니다. 활성 탭을 삭제할 때 비제어 모드는 자동으로 인접한 사용 가능 탭으로 전환되고(plus의 getNameAfterRemove에 맞춤), 제어 모드는 비즈니스 측이 onRemove에서 처리합니다.

자식 노드 제한

children은 반드시 직접 LhTabPane이어야 합니다(.map으로 렌더링 가능, Fragment로 평면 감싸기 가능, 단 커스텀 컴포넌트로 감쌀 수는 없음) — 부모 컴포넌트가 Children.forEach로 내려가며 탭 기록을 수집하기 때문에, 커스텀 감싸기 층이 있으면 수집이 실패합니다.

키보드 인터랙션​

APG tabs 패턴을 따릅니다: 포커스가 탭 버튼에 있을 때 ArrowRight / ArrowLeft(세로형은 ArrowDown / ArrowUp)가 사용 가능 탭 사이를 이동하면서 활성화하고(비활성화 항목 건너뜀), Home / End는 첫 / 마지막 항목으로, Delete / Backspace는 현재 탭을 닫습니다(closable 필요). 활성 탭만 tabindex=0, 나머지는 -1입니다(roving tabindex).

접근성​

탭 바는 role="tablist", 탭은 aria-selected / aria-controls를 가진 role="tab", 패널은 aria-labelledby를 가진 role="tabpanel"이며, id는 useId()로 생성되어 SSR에서 안정적입니다. 비활성 패널은 hidden 속성으로 접근성 트리에서 제외됩니다.

ref​

forwardRef<HTMLDivElement> — 루트 요소. LhTabPane은 HTMLDivElement를 전달합니다.

스타일​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/tabs'