Component

SegmentedControl

소수의 보기나 필터 중 하나를 즉시 전환합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

선택지의 배치 방향

전체 비활성

Code

import { SegmentedControl, SegmentedControlItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<SegmentedControl size={"md"} aria-label="기간" defaultValue="week" disabled={false} orientation={"horizontal"}>
      <SegmentedControlItem equalWidth={false} value="day">
        일
      </SegmentedControlItem>
      <SegmentedControlItem equalWidth={false} value="week">
        주
      </SegmentedControlItem>
      <SegmentedControlItem equalWidth={false} value="month">
        월
      </SegmentedControlItem>
    </SegmentedControl>))
}

Props

import {
  Segment,
  SegmentList,
  SegmentItem,
  SegmentedControl,
  SegmentedControlItem,
} from '@amineslab/ui'

`Segment`

Name	Type	Default	Description
`value`	`string`	-	외부에서 제어하는 선택값입니다.
`defaultValue`	`string`	-	내부 상태로 관리할 때의 초기값입니다.
`onValueChange`	`(value: string) => void`	-	선택값이 바뀔 때 호출합니다.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	세그먼트 컨트롤의 크기입니다.
`disabled`	`boolean`	`false`	전체 선택을 비활성화합니다.

`SegmentList`

Segment 안의 선택 항목을 묶는 radiogroup입니다.

`SegmentItem`

Name	Type	Default	Description
`value*`	`string`	-	선택지 값입니다.
`startIcon`	`ReactNode`	-	레이블 앞에 표시할 아이콘입니다.
`equalWidth`	`boolean`	`false`	항목 너비를 동일하게 맞춥니다.
`disabled`	`boolean`	`false`	선택할 수 없게 합니다.

`SegmentedControl`

기존 문서 API와 호환하는 래퍼입니다. 새 코드에서는 Segment compound API를 사용합니다.

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	기존 래퍼에서만 지원하는 배치 방향 prop입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Controlled

import { SegmentedControl, SegmentedControlItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<SegmentedControl aria-label="보기" defaultValue="list">
          <SegmentedControlItem value="list">목록</SegmentedControlItem>
          <SegmentedControlItem value="board">보드</SegmentedControlItem>
        </SegmentedControl>))
}

사용 기준

권장하는 사용

2개에서 4개의 짧은 선택지에 사용합니다.

피해야 할 사용

저장 후에 반영되는 radio 폼을 segmented control로 표현하지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow keys: 인접 항목 이동
Space: 현재 항목 선택