사용법
기본
options로 선택지를 정의하고 value·onValueChange로 상태를 제어해요.
스타일 커스터마이징
SegmentedControl 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<SegmentedControl
className="shadow-md"
style={{
--gtd-segmented-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<SegmentedControl
classNames={{
root: "my-segmented-control-root",
item: "my-segmented-control-item",
label: "my-segmented-control-label"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-segmented-bg | 그룹 배경 |
| --gtd-segmented-active-bg | 선택 항목 배경 |
| --gtd-segmented-active-color | 선택 항목 글자색 |
인터페이스
SegmentedControlProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options* | { value: string; label: string }[] | — | 옵션 목록 |
| value | string | — | 제어형 value |
| fullWidth | boolean | false | 가로 100% |
SegmentedControl 컴포넌트 Props 표
가져오기
import { SegmentedControl } from "@/components/ui/SegmentedControl";