Segmented Control

Segmented Control (세그먼트 컨트롤)

Segmented Control은 선형으로 나열된 옵션 세트 중에서 하나를 선택할 때 사용하는 컴포넌트예요. 선택된 항목을 나타내는 인디케이터가 함께 움직여요.

출처: 문서

본문

사용법 (Usage)

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

<SegmentGroup.Root>
  <SegmentGroup.Indicator />
  <SegmentGroup.Item>
    <SegmentGroup.ItemText />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>

단축 속성 (Shortcuts)

SegmentGroup 컴포넌트는 자주 쓰는 사용 사례를 위한 단축 속성을 제공해요.

SegmentGroupItems

SegmentGroupItems 단축 속성은 items prop을 기반으로 항목 목록을 렌더링해요.

이렇게 써도 동작해요:

<>
  {items.map((item) => (
    <SegmentGroup.Item key={item.value} value={item.value}>
      <SegmentGroup.ItemText>{item.label}</SegmentGroup.ItemText>
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  ))}
</>

항목을 커스터마이즈할 필요가 없다면 이렇게 더 간결하게 쓸 수 있어요:

<SegmentGroup.Items items={items} />

예시 (Examples)

크기 (Sizes)

size prop을 사용해 세그먼트 컨트롤의 크기를 바꿀 수 있어요.

Controlled

value와 onValueChange props를 사용해 선택된 항목을 제어할 수 있어요.

Hook Form

SegmentedControl을 react-hook-form과 함께 사용하는 예시예요.

세로 (Vertical)

기본적으로 세그먼트 컨트롤은 가로 방향이에요. orientation prop을 vertical로 설정해 세그먼트 컨트롤의 방향을 바꿀 수 있어요.

비활성화 (Disabled)

disabled prop을 사용해 세그먼트 컨트롤을 비활성화할 수 있어요.

비활성화된 항목 (Disabled Item)

항목에 disabled prop을 사용해 그 항목만 비활성화할 수 있어요.

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

--segment-indicator-bg, --segment-indicator-shadow 같은 CSS 변수를 사용해 인디케이터의 모양을 커스터마이즈할 수 있어요.

색상 팔레트 (Color Palette)

기본적으로 세그먼트 컨트롤은 colorPalette prop으로 디자인을 바꾸는 것을 지원하지 않아요. 이 예시는 colorPalette prop이 동작하도록 세그먼트 컨트롤을 커스터마이즈하는 방법을 보여줘요.

아이콘 (Icon)

label을 ReactNode로 렌더링하면 아이콘을 표시할 수 있어요.

카드 (Card)

Card 안에서 SegmentedControl을 사용하는 예시예요.

Props

SegmentGroup의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

Segmented Control