Tabs

Tabs (탭)

탭 인터페이스로 콘텐츠를 표시하는 컴포넌트예요. 여러 섹션을 탭으로 나눠 공간을 효율적으로 쓸 때 유용해요.

출처: 문서

본문

Tabs는 콘텐츠를 탭 인터페이스로 보여 주는 컴포넌트예요. <ExampleTabs name="tabs-basic" />

사용법 (Usage)

import { Tabs } from "@chakra-ui/react"

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

예시 (Examples)

변형 (Variants)

variant prop으로 탭의 시각적 스타일을 바꿀 수 있어요.

지연 마운트 (Lazy Mounted)

lazyMount 및/또는 unmountOnExit prop으로 활성화된 탭 콘텐츠만 렌더링할 수 있어요. 성능 최적화에 유용해요.

인디케이터 (Indicator)

Tabs.Indicator 컴포넌트를 렌더링하면 활성 탭의 시각적 인디케이터를 표시할 수 있어요.

커스텀 인디케이터 (Custom Indicator)

--tabs-indicator-bg와 --tabs-indicator-shadow 같은 CSS 변수로 인디케이터 외형을 커스터마이즈할 수 있어요.

링크 (Links)

Tabs.Trigger 컴포넌트에 asChild를 넘기면 링크를 탭으로 렌더링할 수 있어요. 탭을 클릭하면 해당 링크로 이동해요.

커스텀 라우터 링크를 사용할 때는 Tabs.Root 컴포넌트에 navigate prop을 설정해야 해요.

"use client"

import { Tabs } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"

const Demo = () => {
  const navigate = useNavigate()
  return (
    <Tabs.Root navigate={({ value, node }) => navigate(`/${value}`)}>
      {/* ... */}
    </Tabs.Root>
  )
}

꽉 채우기 (Fitted)

fitted prop으로 탭이 컨테이너의 너비에 맞게 늘어나게 할 수 있어요.

제어 (Controlled)

value와 onValueChange prop으로 활성 탭을 제어할 수 있어요.

스토어 (Store)

탭을 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useTabs 스토어 훅을 사용하는 거예요. 이렇게 하면 탭 바깥에서도 상태와 메서드에 접근할 수 있어요.

탭 비활성화 (Disabled Tab)

Tabs.Trigger 컴포넌트에 disabled prop을 설정하면 탭을 비활성화할 수 있어요.

수동 활성화 (Manual activation)

기본적으로 화살표 키를 누르면 탭이 선택돼요. activationBehavior prop을 manual로 설정하면 이 동작을 끌 수 있어요. 이 모드에서는 클릭하거나 엔터 키를 눌렀을 때만 탭이 선택돼요.

동적 (Dynamic)

탭을 동적으로 추가하고 제거하는 예시예요.

반응형 방향 (Responsive Orientation)

orientation prop은 키보드 탐색과 aria-orientation 동작에 영향을 주기 때문에(스타일링뿐 아니라) 반응형 값을 지원하지 않아요. 방향은 화살표 키의 동작을 바꿔요(가로는 좌/우, 세로는 상/하). 반응형 방향을 구현하려면 useBreakpointValue 훅으로 화면 크기에 따라 방향을 바꾸면 돼요.

애니메이션 (Animation)

_open과 _close 조건부 props로 탭을 애니메이션할 수 있어요.

가이드 (Guide)

활성 탭 스타일링 (Styling active tab)

_selected 조건으로 활성 탭의 텍스트와 배경을 스타일링할 수 있어요.

<Tabs.Trigger
  _selected={{
    bg: "blue.500",
    color: "white",
  }}
>
  Tab
</Tabs.Trigger>

Props

Tabs 컴포넌트의 Root, Trigger, Content 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.

더 알아보기 (Learn more)